總結CSS3新特性 顏色篇

2022-02-08 18:12:32 字數 1556 閱讀 5443

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中的關鍵幀 單個幀中可填寫...