IT兄弟連 HTML5教程 CSS3屬性特效 漸變1

 

漸變背景一直以來在Web頁面中都是一種常見的視覺元素。但一直以來，Web設計師都是經過圖形軟件設計這些漸變效果，而後以圖片形式或者背景圖片的形式運用到頁面中。Web頁面上實現的效果，僅從頁面的視覺效果上來看，與設計並沒有任何差別。事實上這種方法是比較麻煩的，由於首先須要設計師進行設計，而後進行切圖，在經過樣式應用到頁面中。另外，在實際應用中可擴展性差，還直接影響頁面性能。值得慶幸的是，W3C組織將漸變設計收入到CSS3標準中，讓廣大的前端設計師直接受益，能夠直接經過CSS3的漸變屬性製做相似漸變圖片的效果。並且漸變屬性慢慢獲得了衆多現代瀏覽器的兼容，甚至是煩人的IE，在IE10版本也支持了這個屬性。

CSS3 Gradient分爲linear-gradient（線性漸變）和radial-gradient（徑向漸變）。

 

1  CSS3漸變介紹

欲要了解CSS3漸變，就先要知道CSS3漸變是什麼？從早前的設計中咱們能夠知道，漸變是兩種或多種顏色之間的平滑過渡。在建立漸變的過程當中，能夠指定多箇中間顏色值，這個值稱爲色標。每一個色標包含一種顏色和一個位置，瀏覽器從每一個色標的顏色淡出到下一個，以建立平滑的漸變。以下圖所示：

 

漸變能夠應用於任何使用背景圖片的地方。這意味着在CSS樣式中，漸變至關於背景圖片，在理論上可在任何使用url() 值的地方採用，好比最多見的background-image、list-style-type以及前面介紹的CSS3的圖像邊框屬性border-image。但直到目前爲止，僅在背景圖片中獲得最完美的支持。

 

2  線性漸變

在線性漸變過程當中，顏色沿着一條直線過渡：從左側到右側、從右側到左側、從頂部到底部、從底部到頂部或着沿任何任意軸。若是你曾使用過製做圖件，好比說Photoshop，那你對線性漸變並不會陌生。

CSS3製做漸變效果，其實和使用製做軟件中的漸變工具沒有什麼差異。首先須要指定一個漸變的方向、漸變的起始顏色、漸變的結束顏色。具備這三個參數就能夠製做一個最簡單、最普通的漸變效果。若是你須要製做一個複雜的多色漸變效果，就須要在同一個漸變方向增添多個色標。具有這些漸變參數（至少三個），各瀏覽器就會繪製與漸變線垂直的顏色結來填充整個容器。瀏覽器渲染出來的效果就相似於製做軟件設計出來的漸變圖像，從一種顏色到另外一種顏色的平滑淡出，沿所指的線性漸變方向實現顏色漸變效果。

線性漸變的格式以下：

linear-gradient([<起點> || <角度>,]? <點>，<點>…)

 

線性漸變的參數描述如表1：

表1 CSS3線性漸變參數描述