CSS——HSL色彩模式

最新推荐文章于 2025-03-01 03:18:38 发布

Zjaun

最新推荐文章于 2025-03-01 03:18:38 发布

阅读量711

点赞数

分类专栏： CSS 文章标签： CSS

本文链接：https://blog.youkuaiyun.com/Zjaun/article/details/87162902

版权

本文介绍了CSS中的HSL色彩模式，包括Hue、Saturation和Lightness三个要素。Hue代表色调，如0（或360）对应红色，120对应绿色，240对应蓝色。Saturation表示饱和度，范围从0.0%到100.0%，而Lightness则定义了颜色的亮度，其取值也在0.0%到100.0%之间。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

相关代码

在头部编写style

<style type="text/css">
  table{
    border:solidlpxred;
    background:#eee;
    padding:6px;
  }
  th{
    color:red;
    font-size:12px;
    font-weight:normal;
  }
  td{
    width:80px;
    height:30px;
  }
  /*第1行 第4个tr标签 以此类推*/
  tr:nth-child(4) td:nth-of-type(1){background:hsl(0,100%,100%);}/*第1列*/
  tr:nth-child(4) td:nth-of-type(2){background:hsl(0,75%,100%);}/*第2列*/
  tr:nth-child(4) td:nth-of-type(3){background:hsl(0,50%,100%);}/*第3列*/
  tr:nth-child(4) td:nth-of-type(4){background:hsl(0,25%,100%);}/*第4列*/
  tr:nth-child(4) td:nth-of-type(5){background:hsl(0,0%,100%);}/*第5列*/
  /*第2行*/
  tr:nth-child(5) td:nth-of-type(1){background:hsl(0,100%,88%);}/*第1列*/
  tr:nth-child(5) td:nth-of-type(2){background:hsl(0,70%,88%);}/*第2列*/
  tr:nth-child(5) td:nth-of-type(3){background:hsl(0,50%,88%);}/*第3列*/
  tr:nth-child(5) td:nth-of-type(4){background:hsl(0,25%,88%);}/*第4列*/
  tr:nth-child(5) td:nth-of-type(5){background:hsl(0,0%,88%);}/*第5列*/
  /*第3行*/
  tr:nth-child(6) td:nth-of-type(1){background:hsl(0,100%,75%);}/*第1列*/
  tr:nth-child(6) td:nth-of-type(2){background:hsl(0,70%,75%);}/*第2列*/
  tr:nth-child(6) td:nth-of-type(3){background:hsl(0,50%,75%);}/*第3列*/
  tr:nth-child(6) td:nth-of-type(4){background:hsl(0,25%,75%);}/*第4列*/
  tr:nth-child(6) td:nth-of-type(5){ba

最低0.47元/天解锁文章