css3 背景漸變

原本想先瞎扯些什麼，而後又不知道講什麼的好，那就直接進入正題吧。

參考資料：

Using CSS gradients  (以及該頁面內的大部分連接頁面的資料)

首先區分下，日常給的純色background，指的是background-color屬性，而漸變色所指向的是background-image屬性，是做爲背景圖像處理的。

從漸變的形式分爲2種：線性漸變(直線擴散)和徑向漸變(從圓心擴散)。

線性漸變： linear-gradient | repeating-linear-gradient

徑向漸變： radial-gradient | repeating-radial-gradient

線性漸變

語法格式：

linear-gradient(  [ <angle/*角度*/> | to <side-or-corner>/*方向*/ ,]? <color-stop/*漸變開始的顏色*/> [, <color-stop>]+/*漸變結束的顏色，開始-結束的區間內包含漸變涉及到的顏色列表*/ )
<side-or-corner> = [left | right] || [top | bottom]
<color-stop>     = <color> [ <percentage/*當前漸變色所佔百分比*/> | <length/*當前漸變色起始位置，也表明上一個顏色漸變結束的位置*/> ]

使用代碼及效果圖

<div class="test"></div>

兩種顏色的漸變

<style>
/*此例由黑色漸變至紅色*/
  .test{
    width:300px;
    height: 100px;
    background-image: linear-gradient(black, red);                  /*默認是從上到下的漸變*/
    /*background-image: linear-gradient(to top, black, red);*/      /*從下到上的漸變*/
    /*background-image: linear-gradient(to right, black, red);*/    /*從左到右的漸變*/
    /*background-image: linear-gradient(to left, black, red);*/     /*從右到左的漸變*/
  }
</style>

效果圖以下：
 

三種及多種顏色的漸變

<style>
/*此例由黑色漸變至紅色再至黃色*/
  .test{
    width:300px;
    height: 100px;
    background-image: linear-gradient(black, red, yellow);                  /*從上到下*/
    /*background-image: linear-gradient(to top, black, red, yellow);*/      /*從下到上*/
    /*background-image: linear-gradient(to right, black, red, yellow);*/    /*從左到右*/
    /*background-image: linear-gradient(to left, black, red, yellow);*/     /*從右到左*/
  }
  /*... 按此規則依次加顏色列表，實現多色漸變*/
</style>

效果圖以下：

漸變距離的控制

<style>
  .test{
    width:300px;
    height: 100px;
    background-image: linear-gradient(to right, black 5px, red 60px, yellow 100px, purple 300px);
  }
</style>

效果圖以下：

給漸變色加了位置值所表明的含義：

1. div[class="test"]背景色執行從左到右的漸變

2. 0px-5px爲黑色

3. 5px-60px爲黑色向紅色的漸變

4. 60px-100px爲紅色向黃色的漸變

5. 100px-300px爲黃色向紫色的漸變

每兩種顏色之間的漸變的距離爲位置差。

若是後一個顏色的起始位置的值小於前一個顏色的起始位置的值，則這兩種顏色的漸變距離爲0，變成直接的顏色變化。
最後一個顏色可不設置起始位置的值，默認漸變至總長度(這裏指div寬度)的末尾。若是最後一個顏色起始位置的值小於總長度的值，則從該值開始至總長度的末尾由該顏色值純色填充。

使用百分比：

<style>
  .test{
    width:300px;
    height: 100px;
    background-image: linear-gradient(to right, black 10%, red 30%, yellow 50%, purple 100%);
  }
</style>

解釋同上。

不一樣角度的漸變

以上案例都是以<side-or-corner>決定漸變方向，使用<angle>即可以根據本身喜愛定義方向了。

在webkit內核的deg

 

正常模式(指的是沒規定瀏覽器內核的樣式)deg 

angle的角度值與上圖的角度值所指方向一致。

<style>
/*這裏以標準的爲例*/
  .test{
    width:300px;
    height: 100px;
    background-image: linear-gradient(0deg, black, red);          /*從下至上*/
    /*background-image: linear-gradient(45deg, black, red);*/     /*從左下角至右上角*/
    /*background-image: linear-gradient(90deg, black, red);*/     /*從左至右*/
    /*background-image: linear-gradient(135deg, black, red);*/    /*從左上角至右下角*/
    /*background-image: linear-gradient(180deg, black, red);*/    /*從上至下*/
    /*background-image: linear-gradient(225deg, black, red);*/   /*從右上角至左下角*/
    /*background-image: linear-gradient(270deg, black, red);*/    /*從右至左*/
    /*background-image: linear-gradient(315deg, black, red);*/    /*從右下角至左上角*/
  }
</style>

徑向漸變

語法格式：

radial-gradient( [ circle/*圓*/ || <length>/*半徑大小*/ ] [ at <position>/*圓心所在位置*/ ]? ,
      | [ ellipse/*橢圓*/ || [<length> | <percentage> ]{2}]/*百分比*/ [ at <position>/*圓心所在位置*/ ]? ,
      | [ [ circle | ellipse ]/*圓or橢圓*/ || <extent-keyword>/*橢圓離(最近，最遠)邊或角的距離*/ ] [ at <position>/*圓心所在位置*/ ]? ,
      | at <position> ,
      <color-stop> [ , <color-stop> ]+/*漸變顏色列表及位置*/ )
<extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side
<color-stop> = <color> [ <percentage> | <length> ]

使用代碼及效果圖

<div class="test"></div>

圓

<style>
  .test{
    width: 300px;
    height: 100px;
    background-image: radial-gradient(50px at 50% 50% , white 0%, red 50%, purple 99%, transparent 99%);
  }
</style>

以上代碼的圓心在元素的中心點(50% 50%)，半徑爲50px,圓心白色，圓心至半徑50%處由白色漸變至紅色，又從半徑50%處至99%處紅色漸變至紫色，從半徑長度的99%至99%由紫色漸變透明。

注意：transparent 99%(或0%-99%)是爲圓規定在99%以後至100%的背景色爲透明，若是除去這個設置，那剩餘部分將會被前一個背景色填充，固然，如今這個值在這裏是99%，在其餘地方也能夠是其餘值，根據上一個顏色的相對圓心的距離肯定範圍。

橢圓

<style>
  .test{
    width: 300px;
    height: 100px;
    border: 1px solid black;
    background-image: radial-gradient( ellipse farthest-corner at 30% 30% , white 0%, red 20%, purple 30%, transparent 30%);
  }
</style>

首先，選擇圓的類型是ellipse，而後選擇extent-keyword來肯定橢圓的規格(farthest-corner)，而後at position肯定圓心所在位置(30% 30%)，以後平常的漸變顏色列表及漸變範圍。

效果圖以下：

分析下extent-keyword：

closest-side： 以靠近圓心的最近的一條邊爲基準來規定橢圓的大小。

closest-corner：以靠近圓心的最近的一個角(橢圓所在元素的角)爲基準來規定橢圓的大小。

farthest-side：以靠近圓心的最遠的一條邊爲基準來規定橢圓的大小。

farthest-corner：以靠近圓心的最遠的一個角(橢圓所在元素的角)爲基準來規定橢圓的大小。

以上圖爲例，規定的是farthest-corner，這時候最遠的角是div的點D所在的角(最近的角是點A所在位置的角，最近的邊是AB邊，最遠的邊是BD邊)，且橢圓爲30%的規格，圓心是點O，OF：OD = 3：10，所謂的30%即是這麼得來的(固然，也能夠是像素規定)。

...其他規則以此類推...

漸變的repeat

線性repeat

語法格式：

repeating-linear-gradient(  [ <angle>/*角度*/ | to <side-or-corner>/*方向*/ ,]? <color-stop> [, <color-stop>]+/*漸變顏色列表*/ )
<side-or-corner> = [left | right] || [top | bottom]
<color-stop>     = <color> [ <percentage> | <length> ]

案例：

<style>
  .test{
    width: 300px;
    height: 100px;
    border: 1px solid black;
    background-image: repeating-linear-gradient(180deg, transparent, transparent 5px, black 5px, black 10px),repeating-linear-gradient(90deg, transparent, transparent 5px, black 5px, black 10px);
  }
</style>

效果圖以下：

repeating-linear-gradient也可重複使用

<style>
  .test{
    width: 300px;
    height: 100px;
    border: 1px solid black;
    background-image: repeating-linear-gradient(180deg, transparent, transparent 5px, black 5px, black 6px),repeating-linear-gradient(90deg, transparent, transparent 5px, black 5px, black 6px);
  }
</style>

效果圖以下：

角度和方向可根據各自需求選擇。

固然，有了線性的repeat，徑向也不會示弱，來看看徑向的repeat的吧。

語法格式：

repeating-radial-gradient( [[ circle/*圓*/  || <length>/*半徑*/ ]                     [at <position>]?/*位置*/ , | 
        [ ellipse/*橢圓*/ || [<length> | <percentage> ]{2}] [at <position>]? , |
        [[ circle | ellipse ] || <extent-keyword> ] [at <position>]? , |
         at <position>   ,    <color-stop> [ , <color-stop> ]+ )
<extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side
<color-stop> = <color> [ <percentage> | <length> ]

這個是圓的：

<style>
  .test{
    width: 300px;
    height: 100px;
    border: 1px solid black;
    background-image: repeating-radial-gradient(circle, black, black 5px, white 5px, white 10px);
  }
</style>

效果圖以下：

這個是橢圓的：

<style>
  .test{
    width: 300px;
    height: 100px;
    border: 1px solid black;
    background-image: repeating-radial-gradient(ellipse, black, black 5px, white 5px, white 10px);
  }
</style>

效果圖以下：

暫時就寫這些吧，具體的運用看各自設計圖給的是什麼樣的~ 也是懶得每一個效果都切圖...  

同時，歡迎你們共同交流討論各類技術問題~