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及以上
相關用法
- d3.js d3.lab()用法及代碼示例
- PHP exp()用法及代碼示例
- PHP Ds\Map put()用法及代碼示例
- d3.js d3.hcl()用法及代碼示例
- PHP sin( )用法及代碼示例
- PHP abs()用法及代碼示例
- PHP cos( )用法及代碼示例
- d3.js d3.map.set()用法及代碼示例
- PHP next()用法及代碼示例
- PHP Ds\Map get()用法及代碼示例
- d3.js d3.sum()用法及代碼示例
- PHP pi( )用法及代碼示例
注:本文由純淨天空篩選整理自Mahadev99大神的英文原創作品 CSS | hsl() Function。非經特殊聲明,原始代碼版權歸原作者所有,本譯文未經允許或授權,請勿轉載或複製。