CSS 基础学习-028 CSS样式HSL颜色之灰色

由 hrs, 10 八月, 2021

通常通过将色调和饱和度设置为 0 来定义灰色阴影，并将亮度从 0％到 100％进行调整可以得到更深/更浅的阴影：

实例代码：

<!doctype html>
<html>  
  <head>
    <meta charset="utf-8">
    <style>
      h1{ 
        width:300px;

      }   
    </style>
  </head>
  <body>
    <h1>HSL 颜色之灰色度</h1>
    <h1 style="background-color:hsl(0,0%,0%);">hsl(0,0%,0%)</h1>  
    <h1 style="background-color:hsl(0,0%,24%);">hsl(0,0%,24%)</h1>  
    <h1 style="background-color:hsl(0,0%,47%);">hsl(0,0%,47%)</h1>  
    <h1 style="background-color:hsl(0,0%,71%);">hsl(0,0%,71%)</h1>  
    <h1 style="background-color:hsl(0,0%,94%);">hsl(0,0%,94%)</h1>  
    <h1 style="background-color:hsl(0,0%,100%);">hsl(0,0%,100%)</h1>  
  </body>
</html>

运行效果：

CSS 基础学习-028 CSS样式HSL颜色之灰色

标签

评论

相关文章