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(色相, 飽和度, 亮度)
值 | 描述 |
---|---|
hue | 定義色輪上的角度(從 0 到 360)- 0(或 360)是紅色,120 是綠色,240 是藍色 |
saturation | 定義飽和度;0% 是灰色調,100% 是全綵(完全飽和) |
亮度 | 定義亮度;0% 是黑色,50% 是正常,100% 是白色 |