CSS3系列教程:HSL 和HSLA
来源:互联网 发布:hf线切割软件 编辑:程序博客网 时间:2024/05/16 19:45
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浏览器较好的支持,而且不需要任何前缀
上面的演示由以下样式实现
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; }
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; }
- CSS3系列教程:HSL 和HSLA
- css3.0抢先看(七):HSL和HSLA,RGBA全新的定义颜色方法
- HSL和HSLA,RGBA全新的定义颜色方法
- CSS3 RGBA和HSLA色彩模式
- CSS3 HSL colors
- css3中颜色值用HSLA表示
- CSS3系列教程:阴影
- CSS3系列教程:透明度
- CSS3系列教程:RGBA
- CSS3系列教程:背景图片(背景大小和多背景图)
- CSS3系列教程:边框半径和圆角
- CSS3 经典教程系列:CSS3 阴影(text
- CSS3 经典教程系列:CSS3 圆角(border
- CSS3系列教程:边框颜色
- hsl和hsv颜色
- CSS3系列教程:嵌入字体/网络字体
- HTML5/CSS3系列教程:使用SVG图片
- HTML5/CSS3系列教程:使用SVG图片
- java注解原理
- 详解C++中的Boost智能指针
- 18个开源快速建站Java CMS
- LoadRunner Web(HTTP/HTML)协议
- php时间函数大锦集
- CSS3系列教程:HSL 和HSLA
- 转:FIT系列应用创始人冯华君病逝 年仅31岁
- sed
- CSS3系列教程:RGBA
- 四川脐血库存脐血再存脐带送保险还送509元的好孩子童车!给宝宝健康的生命,欢乐的童年
- httpd.conf中加入LoadModule后无法启动的问题。
- [Leetcode] Next Permutation
- 介绍推荐引擎的资料
- Cannot access a closed file的一种情况