當前位置: 首頁>>代碼示例 >>用法及示例精選 >>正文


CSS hsl()用法及代碼示例


hsl()函數是CSS中的內置函數,用於使用Hue-saturation-lightness模型(HSL)定義顏色。

用法:

hsl( hue, saturation, lightness )

參數:此函數接受上述和以下所述的三個參數:


  • hue:此參數用於定義色輪上的度數。其值介於0到360之間,其中0或360代表紅色,120代表綠色,240代表藍色。
  • saturation:此參數用於定義飽和度,其中0%代表灰色陰影,而100%代表全彩色。
  • lightness:此參數用於定義亮度,其中0%代表黑色,50%代表正常,100%代表白色。

以下示例程序旨在說明CSS中的hsl()函數:

程序:

<!DOCTYPE html> 
<html> 
    <head> 
        <title>cubic-bezier function</title> 
        <style>  
            .gfg1 { 
                background-color:hsl(120, 100%, 40%); 
                text-align:center; 
            } 
            .gfg2 { 
                background-color:hsl(120, 100%, 75%); 
                text-align:center 
            } 
            .gfg3 { 
                background-color:hsl(120, 100%, 20%); 
                text-align:center 
            } 
            .gfg { 
                font-size:40px; 
                font-weight:bold; 
                color:green; 
                text-align:center; 
            } 
            h1 { 
                text-align:center; 
            } 
        </style> 
    </head> 
    <body> 
        <div class = "gfg">GeeksforGeeks</div> 
        <h1>The hsl() Function</h1> 
        <p class = "gfg1">Green</p> 
        <p class = "gfg2">Light green</p> 
        <p class = "gfg3">Dark green</p> 
    </body> 
</html>

輸出:

支持的瀏覽器:hsl()函數支持的瀏覽器如下:

  • Chrome 1.0及以上
  • Internet Explorer 9.0及以上
  • Firefox 1.0及更高版本
  • Safari 3.1及更高版本
  • Opera 9.5及以上


相關用法


注:本文由純淨天空篩選整理自Mahadev99大神的英文原創作品 CSS | hsl() Function。非經特殊聲明,原始代碼版權歸原作者所有,本譯文未經允許或授權,請勿轉載或複製。