CSS3—HSL与HSLA属性
㈠HSL(H,S,L)
⑴通过对色相(H)、饱和度(S)、明度(L)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色
⑵取值
H：Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360
S：Saturation(饱和度)。取值为：0.0% - 100.0%
L：Lightness(亮度)。取值为：0.0% - 100.0%
⑶兼容性
浅绿 = 支持
红色 = 不支持
粉色 = 部分支持
⑷示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
background-color:hsl(360, 50%, 50%);
}
</style>
</head>
<body>
<div>hsl颜色值</div>
</body>
</html>
效果图：
㈡HSLA(H,S,L,A)
⑴此色彩模式与HSL相同，只是在HSL模式上新增了Alpha透明度
⑵参数说明：
H：Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360
S：Saturation(饱和度)。取值为：0.0% - 100.0%
L：Lightness(亮度)。取值为：0.0% - 100.0%
A：Alpha透明度。取值0~1之间。
⑶兼容性
浅绿 = 支持
红色 = 不支持
粉色 = 部分支持
⑷示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
background-color:hsl(360, 50%, 50%,.5);
}
</style>
</head>
<body>
<div>hsla颜色值</div>
</body>
</html>
效果图：
