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() 函数使用色相、饱和度和亮度模型 (HSL) 来定义颜色。
HSL 代表色相、饱和度和亮度,它表示颜色的圆柱坐标表示。
版本 | CSS3 |
---|
浏览器支持
表格中的数字指定了完全支持该函数的第一个浏览器版本。
函数 | |||||
---|---|---|---|---|---|
hsl() | 1.0 | 9.0 | 1.0 | 3.1 | 9.5 |
CSS 语法
hsl(色相, 饱和度, 亮度)
值 | 描述 |
---|---|
色相 | 定义色轮上的一个角度(从 0 到 360) - 0(或 360)为红色,120 为绿色,240 为蓝色 |
饱和度 | 定义饱和度;0% 为灰色阴影,100% 为全色(完全饱和) |
亮度 | 定义亮度;0% 为黑色,50% 为正常,100% 为白色 |