网页制作webjx文章简介：使用css3 hsl声明同样是用来设置颜色的。下一个呢？ hsla？ 是的，这个和rgba的效果是一样的。 使用css3 hsl声明同样是用来设置颜色的。下一个呢？ hsla？ 是的，这个和rgba的效果是一样的。 上一篇
使用css3 hsl声明同样是用来设置颜色的。下一个呢？ hsla？ 是的，这个和rgba的效果是一样的。 
使用css3 hsl声明同样是用来设置颜色的。下一个呢？ hsla？ 是的，这个和rgba的效果是一样的。 
上一篇文章：css3教程(9):设置rgb颜色 
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
上面的演示由以下样式实现 
div.hsll1 { background:hsl(320, 100%, 50%); height:20px; } div.hsll2 { background:hsl(320, 50%, 50%); height:20px; } div.hsll3 { background:hsl(320, 100%, 75%); height:20px; } div.hsll4 { background:hsl(202, 100%, 50%); height:20px; } div.hsll5 { background:hsl(202, 50%, 50%); height:20px; } div.hsll6 { background:hsl(202, 100%, 75%); height:20px; } 
浏览器支持：
firefox(3.05 …)
google chrome(1.0.154 …)
google chrome(2.0.156 …)
internet explorer(ie7, ie8 rc1 )
opera(9.6 …)
safari(3.2.1 windows…) css3 hsla
上面的效果由以下样式实现： 
div.hslal1 { background:hsla(165, 35%, 50%, 0.2); height:20px; } div.hslal2 { background:hsla(165, 35%, 50%, 0.4); height:20px; } div.hslal3 { background:hsla(165, 35%, 50%, 0.6); height:20px; } div.hslal4 { background:hsla(165, 35%, 50%, 0.8); height:20px; } div.hslal5 { background:hsla(165, 35%, 50%, 1.0); height:20px; } 
浏览器支持：
firefox(3.05 …)
google chrome(1.0.154 …)
google chrome(2.0.156 …)
internet explorer(ie7, ie8 rc1 )
opera(9.6 …)
safari(3.2.1 windows…)
 以上就是css3教程(10):css3 hsl声明设置颜色_css3_css_网页制作的内容。