CSS hsl()函数

• 

  定义和用法

  hsl()函数使用Hue-saturation-lightness模型（HSL）定义颜色。HSL代表色调，饱和度和亮度 - 表示颜色的圆柱坐标表示。

  特征	说明
  CSS版本	CSS3

• 

  浏览器支持

  表中的数字指定了完全支持该属性的第一个浏览器版本。数字后跟-ms-， -webkit-，-moz-或-o-指定使用前缀的第一个版本。

  函数	IE/Edge	Chrome	FireFox	Safari	Opera
  函数名称
  hsl()	9.0	1.0	1.0	3.1	9.5

• 

  CSS语法

  hsl(hue, saturation, lightness)
  

  值	描述
  hue	定义色轮上的度数（从0到360） - 0（或360）为红色，120为绿色，240为蓝色
  saturation	定义饱和度; 0％是灰色阴影，100％是全色（完全饱和度）
  lightness	定义轻盈; 0％为黑色，50％为正常，100％为白色

• 

  实例

  定义不同的HSL颜色：

  div {
    width: 100px;
    height: 100px;
    background: red;
    transition: width 2s;
    transition-timing-function: hsl(0.1, 0.7, 1.0, 0.1);
  }
  

  尝试一下