css3新增加了hsl(), hsla(), rgb(),rgba()四個函式來建立color值;
hsl函式:h(色調),s(飽和度),l(亮度);
色調:為0-360之間的數值[經實驗,可以為小數];
飽和度與亮度:均為百分比;
下圖截自
當亮度為100%時為白色,當亮度為0%為黑色;
飽和度100%以及亮度50%時生成的顏色均為web安全色
rgb函式:r(red),g(green),b(blue)[計算機三原色];
值可以為0-255任意整數或百分比;
如超出範圍,取最近的有效值:
em /*下圖截自clipped to rgb(255,0,0)
*/em /*
clipped to rgb(255,0,0)
*/em /*
clipped to rgb(100%,0%,0%)
*/
有一點需要注意,百分比與數值不能同時出現在乙個rgb函式中;
這兩位與上邊兩位的區別在於後邊的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...)
參考資料
總結CSS3新特性 顏色篇
css3新增加了hsl hsla rgb rgba 四個函式來建立color值 hsl函式 h 色調 s 飽和度 l 亮度 色調 為0 360之間的數值 經實驗,可以為小數 飽和度與亮度 均為百分比 下圖截自 當亮度為100 時為白色,當亮度為0 為黑色 飽和度100 以及亮度50 時生成的顏色均為...
總結CSS3新特性 Transition篇
css 過渡 transition 是 css3 規範的一部分,用來控制 css 屬性的變化速率。可以讓屬性的變化過程持續一段時間，而不是立即生效。比如，將元素的顏色從白色改為黑色，通常這個改變是立即生效的，使用 transition 後，將按乙個曲線速率變化。這個過程可以自定義。transitio...
總結CSS3新特性 Animation篇
動畫 animation 是css3的亮點.之一 通過animation屬性指定 keyframe來完成關鍵幀動畫 keyframes name 0 可用from關鍵字替代 50 100 100 可用to關鍵字替代 由於是css3,所以不出意外的各種字首 來自mdn,css中的關鍵幀 單個幀中可填寫...