CSS3中HSL和HSLA的简单使用示例

使用css3 hsl声明同样是用来设置颜色的。下一个呢？ hsla？ 是的，这个和rgba的效果是一样的。

hsl声明使用色调hue(h)、饱和度saturation(s)和亮度lightness(l)来设置颜色。

    hue衍生于色盘：0和360是红色，接近120的是绿色，240是蓝色。
    saturation值是一个百分比：0%是灰度，100%饱和度最高
    lightness值也是一个百分比：0%是最暗，50%均值，100%最亮。

随想：为什么是”ligntness”呢？或许我更习惯photoshop中的”brightness”呢……

浏览器兼容性：

目前hsl和hsla被firefox、google chrome、和safari浏览器较好的支持，而且不需要任何前缀
css3 hsl

上面的演示由以下样式实现

css code复制内容到剪贴板

1. div.hsll1 { background:hsl(320, 100%, 50%); height:20px; }     
2. div.hsll2 { background:hsl(320, 50%, 50%); height:20px; }     
3. div.hsll3 { background:hsl(320, 100%, 75%); height:20px; }     
4. div.hsll4 { background:hsl(202, 100%, 50%); height:20px; }     
5. div.hsll5 { background:hsl(202, 50%, 50%); height:20px; }     
6. div.hsll6 { background:hsl(202, 100%, 75%); height:20px; }   

css3 hsla

上面的效果由以下样式实现：

css code复制内容到剪贴板

1. div.hslal1 { background:hsla(165, 35%, 50%, 0.2); height:20px; }     
2. div.hslal2 { background:hsla(165, 35%, 50%, 0.4); height:20px; }     
3. div.hslal3 { background:hsla(165, 35%, 50%, 0.6); height:20px; }     
4. div.hslal4 { background:hsla(165, 35%, 50%, 0.8); height:20px; }     
5. div.hslal5 { background:hsla(165, 35%, 50%, 1.0); height:20px; }