顏色:
CSS3新增加了hsl(), hsla(), rgb(),rgba()四個函數來創建color值;
hsl():
hsl函數:h(色調),s(飽和度),l(亮度);
色調:為0-360之間的數值[經實驗,可以為小數];
飽和度與亮度:均為百分比;
下圖截自http://www.w3.org/wiki/CSS/Properties/color/HSL
當亮度為100%時為白色,當亮度為0%為黑色;
飽和度100%以及亮度50%時生成的顏色均為web安全色
rgb():
rgb函數:r(red),g(green),b(blue)[計算機三原色];
值可以為0-255任意整數或百分比;
如超出范圍,取最近的有效值:
em { color: rgb(300,0,0) } /* clipped to rgb(255,0,0) */ em { color: rgb(255,-10,0) } /* clipped to rgb(255,0,0) */ em { color: rgb(110%, 0%, 0%) } /* clipped to rgb(100%,0%,0%) */
下圖截自http://www.w3.org/wiki/CSS/Properties/color/RGB
有一點需要注意,百分比與數值不能同時出現在一個rgb函數中;
rgba()與hsla():
這兩位與上邊兩位的區別在於后邊的a(alpha)透明度;
透明度為0-1之間的數值,0為全透明,1為全不透明,利用透明度可以做出很多好看的效果
一個簡單的例子(當然了- -這個例子不算好看)
上例中用到了一個類似於變量的單詞(currentColor[大小寫不區分])
currentColor可用於所有設置顏色屬性的地方.
取值為當前元素的color屬性值,如果沒有,尋找父級,一直到根元素,如果都沒有設置的話,不要擔心,還有瀏覽器代理的默認顏色.
w3官方有一個簡短的解釋,如果元素color屬性值為currentColor的話,則視為 'color:inherit';
比較實用的一個地方就是,設置元素邊框顏色,顏色(color),等等屬性時,只需設置顏色(color);后續更改時也只需修改一處,子元素也可直接繼承使用currentColor,但需要確保子元素沒有顯示聲明color屬性值;
還有用到了兩個長度單位(vw,vh)取值范圍[0-100]
100vw為屏幕寬度;
100vh為屏幕高度;
還存在兩個值,vmax與xmin,分別是取出寬高最大或最小值;
vw與vh可參與calc()的計算;
順便介紹下 opacity:
opacity用來設置元素的透明度:(取值為0-1)
IE8可用替代的
filter:Alpha(opacity=50) /*0-100*/
來實現透明度;
顏色基本上就這些了,如有錯誤或補充還請指出(無視transparent...)