CSS hsl() 函数
实例
定义不同的 HSL 颜色:
#p1 {background-color:hsl(120,100%,50%);} /* 绿色 */ #p2 {background-color:hsl(120,100%,75%);} /* 浅绿色 */ #p3 {background-color:hsl(120,100%,25%);} /* 深绿色 */ #p4 {background-color:hsl(120,60%,70%);} /* 柔绿色 */
定义和用法
hsl() 函数使用 Hue-saturation-lightness 模型(HSL)定义颜色。
HSL 指的是色相(hue)、饱和度(saturation)和亮度(lightness)- 代表颜色的圆柱坐标表示。
版本: | CSS3 |
---|
浏览器支持
表格中的数字注明了完全支持该功能的首个浏览器版本。
函数 | |||||
---|---|---|---|---|---|
hsl() | 1.0 | 9.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% 是白色。 |