CSS3中Color的一些特性介紹

發(fā)布時間：2012-05-27 11:10:46 作者：佚名

CSS3 Color特性包括在傳統(tǒng)的hex 和RGB 值中增加了HSL特性，也就是增加了Opacity（透明度）和Alpha channels

1.CSS 簡介
CSS（Cascading Style Sheets），我們都不陌生吧。特別是我們在開發(fā)web項目的時候，用的更是不亦樂乎。

可是，你知道嗎？CSS（注意也就是CSS1）是在1996年的時候產(chǎn)生的標(biāo)準(zhǔn)，也就是到現(xiàn)在時隔（2012-1996）差不多15年的歷史。畢竟時間在一直的走嘛，現(xiàn)在CSS3也在使用中，不過需要注意的是，CSS3并非是W3C的一個標(biāo)準(zhǔn)，它現(xiàn)在依舊是草案（Working Draft）狀態(tài)，而不是最終的穩(wěn)定版---W3C推薦。

據(jù)目前所知，CSS3已經(jīng)增加了40多種模塊（Module），既然還是草案，所以以后就還有增加的可能。所以，用我們的祈禱吧，希望CSS3趕快成為標(biāo)準(zhǔn)。那個時候我們程序員才是解放的時候。

在這篇文章中，我們會討論一下CSS3中新增的40多個模塊中的一個模塊----Color模塊。Color模塊，比其他的模塊更加的穩(wěn)定。事實上，在2011年6月的時候，它就已經(jīng)成為了W3C的推薦了，也就是標(biāo)準(zhǔn)了。

這新的CSS3 Color特性包括在傳統(tǒng)的hex 和RGB 值中增加了HSL特性，也就是增加了Opacity（透明度）和Alpha channels。

2.HSL Colors
在我們傳統(tǒng)開發(fā)web網(wǎng)頁的時候，我們在使用下面的關(guān)鍵字來進行對HTML和CSS進行顏色的設(shè)定。

Color 關(guān)鍵字 (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow)
Hexadecimal（16進制）表示法
RGB (red，green，blue)表示法

比如，如下實例：

復(fù)制代碼

代碼如下:

.keyword { color: white; }//關(guān)鍵字表示法
.shorthex { color: #FFF; } //短的16進制表示法
.longhex { color: #FFFFFF; } //長16進制表示法
.rgb1 { color: rgb(255, 255, 255); } //rgb1 通過值
.rgb2 { color: rgb(100%, 100%, 100%); } //rgb2 通過百分比

對上面的表示，我們都不陌生。

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

HSL格式：

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

.implemented { color: hsl(240, 50%, 80%); }
那這三個單詞什么意思呢？

H（Hue）色調(diào)：0和360是紅色，接近120的是綠色，240是藍(lán)色。W3C提供了一些對H色調(diào)有用的值：Tables Of Hue andSaturation Values,當(dāng)然也還有其他的工具可以生成Hue的值，比如下面提到的HSL Color Picker在線工具。

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

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

HSL Color Picker是一個用來取HSL顏色的工具。界面如下：

HSL瀏覽器兼容性：

目前HSL和HSLA被Firefox、Google Chrome、和Safari瀏覽器較好的支持，而且不需要任何前綴修飾。

實例：

復(fù)制代碼

代碼如下:

#left { color: hsl(240, 0%, 50%); }
#center { color: hsl(240, 50%, 50%); }
#right { color: hsl(240, 100%, 50%); }

結(jié)果：

OK，那我們現(xiàn)在來調(diào)整一下：
OK，那我們現(xiàn)在來調(diào)整一下：

復(fù)制代碼

代碼如下:

#left { color: hsl(240, 100%, 0%); }
#center { color: hsl(240, 100%, 50%); }
#right { color: hsl(240, 100%, 100%); }

其實，也簡單，說真的，我也不懂為什么要增加這種方增加顏色的方法。呵呵不過也好，多一種方法把~?？倸w有好處的，不是嗎？

Opacity（透明度）和Gradients（漸變）
另外一個和顏色相關(guān)的CSS3屬性是 Alpha 通道（channel）和Opacity（透明度）?；旧蟻碚f
作者：Lanny☆蘭東才