|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
网上冲浪无论你用InternetExplorer还是NetscapeNavigator,几乎随时都在与CSS打交道,在网上没有使用过CSS的网页可能不好找。
利用CSS3HSL声明一样是用来设置色彩的。下一个呢?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、GoogleChrome、和Safari扫瞄器较好的撑持,并且不必要任何前缀
CSS3HSL
下面的演示由以下款式完成- 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+…)
- GoogleChrome(1.0.154+…)
- GoogleChrome(2.0.156+…)
- InternetExplorer(IE7,IE8RC1)
- Opera(9.6+…)
- Safari(3.2.1+windows…)
CSS3HSLA
下面的效果由以下款式完成:- 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+…)
- GoogleChrome(1.0.154+…)
- GoogleChrome(2.0.156+…)
- InternetExplorer(IE7,IE8RC1)
- Opera(9.6+…)
- Safari(3.2.1+windows…)
如果单独使用DIV而不加任何CSS,那么它在网页中的效果和使用是一样的。 |
|