CSS3漸變色詳解

漸變區域一直是裝飾前端頁面的重要飾品，在CSS3的漸變色屬性出來以前這一效果只能藉助設計師的圖片來進行裝飾，這樣會平白給頁面增長了一些http請求次數並增大了頁面體積，最終致使延長頁面的加載時間。而漸變色屬性的出現則很大程度上解決了該問題，那咱們今天就詳細剖析一下這個漸變色屬性。

漸變色的定義

所謂漸變色，通常是指在兩個及以上的顏色之間呈現一種平滑的過渡效果，該效果是矢量效果，不會由於頁面的放大而出現模糊的狀況，CSS3中定義了兩種漸變類型，一種爲線性漸變，一種爲徑向漸變。

CSS3線性漸變

咱們首先在頁面中建立一個div盒子，並以該盒子做爲漸變色的使用載體

.gradient{
       width:100px;
       height:100px;
       background:red;
   }

   <div class="gradient"></div>複製代碼

這是頁面常見的裝飾元素的方法，及經過background給某個元素設置單個背景顏色，咱們今天講的漸變色則是對background的顏色值的一種描述，接下來咱們看一個案例

.gradient{
       width:100px;
       height:100px;
       background:linear-gradient(red 0%,blue 100%);
   }

   <div class="gradient"></div>複製代碼

其實咱們徹底能夠把給元素設置顏色理解爲給一堵牆刷一個油漆，這個油漆怎麼刷徹底是由戶主本身決定的，咱們傳統的方法要麼是給牆刷一個顏色的油漆，要麼是給牆上貼一張海報（background-image），而漸變色則是給牆上刷多種顏色。不一樣的參數具體意義以下

咱們還能夠在顏色前面加上方向控制，漸變色默認給我們加的是從上往下：linear-gradient(to bottom，red 0%,blue 100%)，咱們能夠經過對to後面的方向進行自定義可實現不一樣的效果，如：

• 從下往上linear-gradient(to top，red 0%,blue 100%)，下紅上藍

• 從左往右linear-gradient(to right，red 0%,blue 100%)，左紅右藍

• 從右往左linear-gradient(to left，red 0%,blue 100%)，右紅左藍

• 從左上到右下linear-gradient(to bottom right, red , blue），左上紅右下藍

CSS3徑向漸變

徑向漸變和線性漸變的惟一不一樣就是添加顏色的方向，徑向漸變相似畫同心圓，一層層的往外面畫圈圈，下面咱們來看一個案例

.gradient{
       width:100px;
       height:100px;
       background:radial-gradient(red 0%,blue 100%);
   }

   <div class="gradient"></div>複製代碼

其實咱們一樣能夠這麼理解，咱們一開始拿着紅顏色的油漆從牆的中心點開始刷油漆，而後不停的畫圈圈，直到圓圈碰到牆的邊緣，邊緣以外的區域所有刷上藍色的油漆，咱們能夠拿示意圖詳細瞭解一下