IT兄弟連 HTML5教程 CSS3屬性特效 新增顏色模式

 

對於設計人員和開發人員來講，CSS一直是web設計過程當中重要的一部分。網頁外觀主要由CSS控制，編寫CSS代碼能夠任意改變咱們的網頁佈局以及網頁內容的樣式。隨着CSS3的出現以及愈來愈多的瀏覽器對它的支持，設計師們有了更多的選擇。CSS3可讓網頁增添了很多的動畫元素，讓咱們的網頁變得更加生動有趣，而且易於交互。本章利用CSS3的樣式屬性來製做出豐富多彩的網頁。在本章中，咱們爲CSS3的樣式屬性做一個介紹，列出該屬性的屬性及用法。使用該樣式屬性製做一些小案例來對網頁樣式進行設置。讓讀者能夠更加直觀清晰地瞭解到CSS3的樣式屬性，並可以當即使用它。經過本章的學習，讀者就能夠利用CSS3爲本身的網站錦上添花了。

新增顏色模式

CSS3樣式新增了一種顏色模式rgba，比CSS的顏色模式多了一個透明度的設置。RGB對於你們來講一點不陌生，它就是紅色R+綠色G+藍色B，那如今咱們所說的RGBA又是什麼呢？說得簡單一點就是在RGB的基礎上加進了一個通道Alpha。新增顏色模式的參數說明如表1所示。

表1  CSS3新增顏色模式參數說明

 

 

若是龐統說rgba是製做透明色（透明背景色、透明邊框色、透明前景色等），你們不禁會想起opacity這個東西。它在咱們CSS2中製做背景色一般用到，但是要用它來製做邊框色或都說前景色的話，沒法實現這個功能。這裏利用一個實例對rgb和opacty同時使用與rgba使用做對比，代碼以下所示：

使用瀏覽器直接打開這個文件，就能夠看到瀏覽器對這個網頁文件解釋後的結果，效果中咱們能夠看出，他們相同之處就是背景色徹底是同樣的，但區別就是一直讓你們以爲頭痛的問題，那就是opacity後代元素會隨着一塊兒具備透明性，因此咱們opacity中的字隨着透明值降低愈來愈看不清楚，而RGBA不具備這樣的問題。如圖1所示：

從咱們上面的實例中能夠看出，RGBA比爲元素設置CSS的透明度更好。由於單獨的顏色不影響整個元素的透明度，也不會影響到元素其它的屬性，好比說邊框，字體。同時爲某元素設置rgba，也不會影響到其餘元素的相關透明度。

圖1  opacity與rgba透明度對比