CSS Gradient詳解

前言

如今設計師同窗愈來愈高大上了，純色背景已經不能知足人民羣衆日益增加的物質文化須要了，必須整漸變背景o(╯□╰)o。怎麼還原呢，設計師直接丟過來一個幾十K的圖片，這怎麼行。。。

還好咱們有CSS第三代！此次就來嘮嘮CSS3 Gradient(/ˈgreɪdɪənt/)的用法。

兼容性

從Can I use上看，現代瀏覽器支持程度良好，尤爲移動端，對於不支持的瀏覽器，下文會提供一種採用純色的降級方案。

可是各類兼容性問題確定免不了，Gradient和Flex box同樣eggache，總共有三種語法規則，並且差別很大。。。

這裏爲了討論簡單，咱們只涉及最新的語法（基本能覆蓋大量新瀏覽器了）。老舊語法規則和IE等各瀏覽器的兼容方法請見參考文章的二、3有詳細的介紹，也可使用Gradient Generator或者autoprefixer自動生成代碼。

前置知識

一、繪製區域，也就是規範中所謂的gradient box（爲了理解無歧義，下文再也不翻譯該術語），跟所關聯DOM的實際尺寸有關，好比，設定background的話，繪製區域就是DOM的padding box，除非用backgroud-size指定大小；若是是設定list-style-image，繪製區域就是1em的正方形。

二、從W3C的描述中能夠知道，瀏覽器實際是根據Gradient指定的語法來生成對應的圖片

        A gradient is an image that smoothly fades from one color to another. 

      並且不僅background能夠用，好比

1 2	background : linear - gradient ( white , gray ) ; list - style - image : radial - gradient ( circle , # 006 , # 00a 90 % , # 0000af 100 % , white 100 % ) ;

三、因爲是image，因此用於background時，實際是設置在background-image上，若是隻是單純的漸變顏色，能夠用如下的樣式來對不支持的老舊瀏覽器作降級處理

1 2 3 4 5 6

. gradient { /* can be treated like a fallback */   background - color : red ; /* will be "on top", if browser supports it */   background - image : linear - gradient ( red , orange ) ; }

原理就借用慕課網的一張圖：

Gradient有幾個子特性，下面一一列出。

線性漸變（linear-gradient）

語法以下：

1 2 3 4 5

linear - gradient ( ) = linear - gradient (   [ | to ] ? ,   < color - stop - list > ) < side - or - corner > = [ left | right ] || [ top | bottom ]

第一個參數指明瞭顏色漸變的方向：

• 能夠是角度，好比0deg，表示正上方向，90deg表示向右（順時針）
• 也能夠是關鍵詞，好比to top, to right, to bottom, to left, 分別對應了0deg, 90deg, 180deg, 270deg。固然也能夠不指定，默認值是to bottom

第二個參數指明瞭顏色斷點（即color-stop）。位置能夠省略，第一個默認爲0%，最後一個默認爲100%，若是中間的值沒有指定，則按顏色數目求均值，好比

1 2 3

linear - gradient ( red 40 % , white , black , blue ) /*等價於*/ linear - gradient ( red 40 % , white 60 % , black 80 % , blue 100 % )

更多邊界狀況能夠參考W3C規範，建議位置都採用一樣的單位，避免產生意外狀況。

瀏覽器是如何繪製漸變線的呢？

以下圖，從gradient box的中心（對角線交點）開始以CSS中指定的角度向兩側延伸，終點是gradient box的一個相近頂點到gradient line垂線的垂足，起點也是相似的求法，兩點間的距離就是gradient line的長度（濃濃的初中幾何味~）。

因此，gradient line的長度計算公式是：

1 2	abs ( W  * sin ( A ) ) + abs ( H  * cos ( A ) ) A是角度， W是 gradient box的寬， H爲高

是否是看完有種然並卵的感受：前端工程師哪裏須要知道這些鬼啊。

非也非也，在開發UI的時候，清楚的知道瀏覽器原理，才能在腦中根據視覺稿正確的解構出CSS代碼，不然只能在那裏傻傻的試了又試。

🌰栗子一

如下的寫法效果其實都同樣 

1 2 3 4 5

background - image : linear - gradient ( yellow , green ) ; // 默認方向爲to bottom   background - image : linear - gradient ( to bottom , yellow , green ) ; // 使用關鍵字指定方向   background - image : linear - gradient ( 180deg , yellow , green ) ; // 使用角度指定方向   background - image : linear - gradient ( to top , green , yellow ) ;   background - image : linear - gradient ( to bottom , yellow 0 % , green 100 % ) ; // 指定顏色斷點

           

🌰栗子二

固然多個顏色斷點也能夠：

1	background - image : linear - gradient ( to bottom , # FF0000 14.28 % , # FFA500 14.28 % , # FFA500 28.57 % , # FFFF00 28.57 % , # FFFF00 42.85 % , # 008000 42.85 % , # 008000 57.14 % , # 0000FF 57.14 % , # 0000FF 71.42 % , # 4B0082 71.42 % , # 4B0082 85.71 % , # 800880 85.71 % , # 800880 100 % ) ;

這個例子還有個小技巧，Gradient中兩個不一樣顏色間默認是漸變的，但若是咱們須要作出圖中這種顏色明顯變化的效果（銳變），就能夠用同一個位置不一樣顏色的方式實現。

🌰栗子三

在顏色上設置透明度漸變

1 2 3 4 5 6 7 8 9

. gradient - 1 {   background - image : url ( http : //a57.foxnews.com/global.fncstatic.com/static/managed/img/fn2/876/493/EmmaWatsonBrown.jpg);   background - size : 100 % 100 % ; }   . gradient - 2 {   background : linear - gradient ( to right , rgba ( 255 , 255 , 255 , 0 ) , rgba ( 255 , 255 , 255 , 1 ) ) , url ( http : //a57.foxnews.com/global.fncstatic.com/static/managed/img/fn2/876/493/EmmaWatsonBrown.jpg) no-repeat;   background - size : 100 % 100 % ; }

效果以下，左邊原圖，右邊增長了一層遮罩，這個效果實際上是利用了CSS3的多背景語法

更多例子能夠在這裏看 http://lea.verou.me/css3patterns/

徑向漸變（radial-gradient）

radial gradient其實就是顏色從一個點以同心圓或者橢圓向外漸變。

簡化版語法以下：

1 2 3 4

radial - gradient ( ) = radial - gradient (   [ || ] ? [ at ] ? ,   < color - stop - list > )

• position用來指定漸變圓心的位置，默認爲center，賦值規則與background-positon的相似；
• ending-shape能夠是circle或者elipse，若是省略，則默認值與size相關，size指定一個值就是圓形，不然是橢圓；
• size能夠是具體的值，也能夠用關鍵字指定，默認值是farthest-corner。若是是具體值，圓形須要一個數值，橢圓須要兩個。關鍵字則包括：

   

   

  • closest-side 指gradient box某一邊到盒子中心最近的距離；
  • farthest-side 指gradient box某一邊到盒子中心最遠的距離；
  • closest-corner 指gradient box某一頂點到盒子中心最近的距離；
  • farthest-corner 指gradient box某一頂點到盒子中心最遠的距離；
• color-stop-list與linear-gradient相似

注意：

• size的數值不能是負數
• W3C規範規定，百分比的數值只能用於橢圓，不能用於圓形。
• position的值能夠是負數

因此，複雜版語法以下：

1 2 3 4 5 6 7 8 9 10

radial - gradient ( ) = radial - gradient (   [ [ circle               || ]                          [ at ] ? , |     [ ellipse              || [ | ] { 2 } ]    [ at ] ? , |     [ [ circle | ellipse ] || ]                  [ at ] ? , |     at < position > ,   ] ?   < color - stop > [ , ] + ) < extent - keyword > = closest - corner | closest - side | farthest - corner | farthest - side

🌰栗子一

如下幾種寫法是等價的

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

. gradient - 1 {   background - image : radial - gradient ( yellow , green ) ; }   . gradient - 2 {   background - image : radial - gradient ( ellipse at center , yellow 0 % , green 100 % ) ; }   . gradient - 3 {   background - image : radial - gradient ( farthest - corner at 50 % 50 % , yellow , green ) ; }   . gradient - 4 {   background - image : radial - gradient ( ellipse farthest - corner at 50 % 50 % , yellow , green ) ; }

🌰栗子二

看下size各類關鍵字的效果

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

. gradient - 1 {   background - image : radial - gradient ( circle closest - side at 30 % 50 % , yellow , green ) ; }   . gradient - 2 {   background - image : radial - gradient ( circle farthest - side at 30 % 50 % , yellow , green ) ; }   . gradient - 3 {   background - image : radial - gradient ( circle closest - corner at 30 % 50 % , yellow , green ) ; }   . gradient - 4 {   background - image : radial - gradient ( circle farthest - corner at 30 % 50 % , yellow , green ) ; }

圓心沒設置在中心是由於矩形的對角線相等且平分，因此closest-corner = farthest-corner，就無法比較差別了。

重複漸變（Repeating Gradients）

基本語法與上面的線性漸變和徑向漸變相似，就是增長了重複的特性。

從Can I use的數據看目前支持程度不樂觀，PC除了IE都還不錯，移動端Android4.0如下都紅o(╯□╰)o。。

可是瞭解下仍是必要的

 

重複的規則簡單說就是用最後一個顏色斷點的位置減去第一個顏色斷點位置的距離做爲區間長度，不斷的重複。好比repeating-linear-gradient(red 10px, blue 50px) 就至關於linear-gradient(…, red -30px, blue 10px, red 10px, blue 50px, red 50px, blue 90px, …)

至於首尾顏色距離爲0等特殊狀況，這裏就不細說 了，能夠到W3C規範自行研究。

🌰栗子

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

div {   width : 100px ;   height : 100px ;   margin : 10px ;   border : 1px solid blue ;   float : left ; }   . repeat - linear {   background - image : repeating - linear - gradient ( 45deg , white , white 10px , red 10px , red 20px ) ; }   . repeat - radial {   background : repeating - radial - gradient ( circle at bottom left , white , white 10px , red 10px , red 20px ) ; }

根據上面說的規則，這個例子裏的區間長度是首尾顏色的位置之差，是20px。

咱們能夠驗證下，兩張圖裏都有約7個紅白條，矩形寬高均100px，對角線則是約140px，140px/7=20px，bingo！