CSS hsl()函数功能简介


摘要:
下文讲述css中hsl函数简介说明,如下所示:


css hsl函数功能说明

hsl是css3种新加入的属性。

hsla函数用于返回一个css可以识别的颜色值类似于十六进制颜色值和颜色名称。

hsl:(Hue, Saturation, Lightness)的缩写。
hsl在css中的功能是使用色相,饱和度,亮度来设置颜色信息。
hsl语法说明:
—————————————-
hsl(hue, saturation, lightness)

属性

备注说明
hue – 色相

定义色相 (0 到 360) – 0 (或 360) 为红色, 120 为绿色, 240 为蓝色

saturation – 饱和度

定义饱和度; 0% 为灰色, 100% 全色
lightness – 亮度

定义亮度 0% 为暗, 50% 为普通, 100% 为白

—————————————-
色相(H):颜色名称,例:红色,黄色。
饱和度(S):色彩的纯度,越高色彩越纯,低则逐渐变灰,取 0-100% 的数值。
亮度(L):颜色的亮度增加,取 0-100%,值高增加亮度,颜色会向白色变化;值低减少亮度,颜色会向黑色变化。

css hsl函数举例说明

<html>
<head>
<meta charset="utf-8">
<title>猫猫教程(www.maomao365.com)-HSL函数简介说明</title>
<style>
#a {background-color:hsl(120,100%,50%);}
#b {background-color:hsl(120,100%,75%);}
#c {background-color:hsl(120,100%,25%);}
#d {background-color:hsl(120,60%,70%);}
#e {background-color:hsl(240,100%,50%);color:white;}
#f {background-color:hsl(240,60%,70%);color:white;}
</style>
</head>

<body>
<p>HSL 颜色:</p>
<p id="a">绿色</p>
<p id="b">浅绿</p>
<p id="c">暗绿</p>
<p id="d">柔和绿色</p>
<p id="e">蓝色</p>
<p id="f">柔和蓝色</p>
</body>
</html>
 
css hsl函数用法简介

css hsl函数用法简介