CSS3中Color的一些特性介绍

1.CSS 简介
CSS（Cascading Style Sheets），我们都不陌生吧。特别是我们在开发web项目的时候，用的更是不亦乐乎。

可是，你知道吗？CSS（注意 也就是CSS1）是在1996年的时候产生的标准，也就是到现在时隔（2012-1996）差不多15年的历史。毕竟时间在一直的走嘛，现在CSS3也在使用中，不过需要注意的是，CSS3并非是W3C的一个标准，它现在依旧是草案（Working Draft）状态，而不是最终的稳定版---W3C推荐。

据目前所知，CSS3已经增加了40多种模块（Module），既然还是草案，所以以后就还有增加的可能。所以，用我们的祈祷吧，希望CSS3赶快成为标准。那个时候我们程序员才是解放的时候。

在这篇文章中，我们会讨论一下CSS3中新增的40多个模块中的一个模块----Color模块。Color模块，比其他的模块更加的稳定。事实上，在2011年6月的时候，它就已经成为了W3C的推荐了，也就是标准了。

这新的CSS3 Color特性包括 在传统的hex 和RGB 值中增加了HSL特性，也就是增加了Opacity（透明度）和Alpha channels。

2.HSL Colors
在我们传统开发web网页的时候，我们在使用狼蚁网站SEO优化的关键字来进行对HTML和CSS进行颜色的设定。

Color 关键字 (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow)
Hexadecimal（16进制） 表示法
RGB (red，green，blue)表示法

比如，如下实例


对上面的表示，我们都不陌生。

那么，在CSS3中的HSL怎么表示以及是什么意思呢？

HSL格式

.example { color: hsl([hue], [saturation], [light]); }用的也很简单

.implemented { color: hsl(240, 50%, 80%); }
那这三个单词什么意思呢？

H（Hue）色调0和360是红色，接近120的是绿色，240是蓝色。W3C提供了一些对H色调有用的值,也还有其他的工具可以生成Hue的值，比如狼蚁网站SEO优化提到的HSL Color Picker在线工具。

S(Saturation,饱和度)值是一个百分比0%是灰度，100%饱和度最高

L(Lightness，亮度)值也是一个百分比0%是最暗，50%均值，100%最亮。

是一个用来取HSL颜色的工具。界面如下

HSL浏览器兼容性

目前HSL和HSLA被Firefox、Google Chrome、和Safari浏览器较好的支持，而且不需要任何前缀修饰。

实例

结果

OK，那我们现在来调整一下
OK，那我们现在来调整一下

其实，也简单，说真的，我也不懂为什么要增加这种方增加颜色的方法。呵呵 不过也好，多一种方法把~。总归有好处的，不是吗？

Opacity（透明度） 和Gradients（渐变）
一个和颜色相关的CSS3属性是 Alpha 通道（channel）和Opacity（透明度）。基本上来说
作者Lanny☆兰东才