【css3筆記】---- 漸變的秘密

《CSS揭秘》這本書非常不錯，充滿了干貨和驚喜。以下主要是關於使用漸變做出來的一些效果的筆記。請用最新的現代瀏覽器觀看。

首先要回顧下一個css語句： 

linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+)

這是一個線性漸變，第一參數是漸變方向，是可選的。可以是角度，angle的值是度數，比如45deg，90deg。也可以使用to side-or-corner .比如 to left（從右到左） ,to bottom(從上到下)；第二個和第三個參數都是漸變顏色。所以最簡單的寫法可以有：

background: linear-gradient(aquamarine,orange)

默認是從上往下漸變。但如果我們不想要漸變，就要顏色條。訣竅就是兩種顏色之間不要留空隙，因為留了空隙就會出現漸變的過渡效果。所以我們可以設置各占50%。這個50%代表顏色位置。也可以是長度單位。

background: linear-gradient(aquamarine 50%,orange 50%)

 

 如果我們需要多種顏色呢，比如一個藍白紅。

 background: linear-gradient(90deg,aqua 0 ,aqua 33%,white 0 ,white 67%,crimson 0 ,crimson )

注意到三個0和最后的crimon顏色沒有色標。第一個aqua 0 ,aqua 33% 表示aqua占了33%，而第二個白色卻是 white 0 ,white 67%，看上去是占了67%，其實是從33%開始的。

如果某個色標的位置比它之前的位置都要小，則色標的位置會被設置為前面所以色標位置的最大值。

所以第二個0代表的是33%，第三個0代表的是67%。你可以將0改成小於這兩個值的值，效果是一樣的。而最后一個顏色，不用色標也會自動填充。所以如果我們只想畫個線條，漸變顏色可以使用透明色：

 linear-gradient(white 2px, transparent 0)

但如果我們要實現重復效果，還需要background-size的配合。background-size默認是 100% 100%。但如果定義了大小，等於是把整個面積分割成重復的小塊。

網格1：

 .grid {
            width: 225px;
            height: 225px;
            background: #58a;
            background-image: linear-gradient(white 2px, transparent 0),linear-gradient(90deg,white 2px,transparent 0);
            background-size: 75px 75px, 75px, 75px;
        }

第一個漸變是將225px 橫着分成了三等分。然后第二個漸變，垂直分成了三等分。這是肉眼看到的效果，其實是9個75px*75px的方塊拼出來的結果。

網格2：

background-image: linear-gradient(white 2px, transparent 0),linear-gradient(90deg,white 2px,transparent 0),linear-gradient(hsla(0,0%,100%,.3) 1px,transparent 0),linear-gradient(90deg, hsla(0,0%,100%,.3) 1px,transparent 0);
background-size: 75px 75px, 75px 75px,15px 15px,15px 15px;

那這個網格實現就簡單了。再疊加漸變，每個75再分成5個15。這效果看着像瓷磚。

棋盤

但是如何畫出一個棋盤呢？注意線條不是連貫的哦。如上圖，根據上面background-size的思路，我們知道這樣的棋盤是有多個這樣的正方形組成的。

而這兩個正方形，又是由四個三角形組成的。線性漸變的一個特點就是會在background-size的區域里，一條線上只有一種顏色。

background-image: linear-gradient(45deg, #bbb 25%, transparent 0),linear-gradient(45deg, transparent 75%,#bbb 0),linear-gradient(45deg, #ffbb33 25%, transparent 0),linear-gradient(45deg, transparent 75%,#ffbb33 0);
background-size: 30px 30px;
background-position: 0 0, 15px 15px,15px 15px, 30px 30px;

注意到還使用了一組background-position，第一個#bbb色是占了45度方向的25%，而第二個#bbb色是占45度方向最后的25%。如果把第二個三角形換成紅色，然后位置從0,0開始就一目了然了。

 background-image: linear-gradient(45deg, #bbb 25%, transparent 0),linear-gradient(45deg, transparent 75%,red 0);
 background-size: 30px 30px;
 background-position: 0 0, 0px 0px,15px 15px, 30px 30px;

將紅色三角形位置改為15px,15px 就湊成了一個正方形。同理再疊加出一個正方形就得到了棋盤的格式。同理，我們可以拼湊一個歇着的格子。

讓三角形每次轉90度，且不必移動位置。

background-image: linear-gradient(45deg, red 0, red 25%,transparent 0), linear-gradient(135deg, orange 0, orange 25%,transparent 0),linear-gradient(225deg, yellow 0, yellow 25%,transparent 0),linear-gradient(315deg, green 0, green 25%,transparent 0)

 

斜網格

有了上面的積累，畫一個斜格子就簡單了：

 background-image: linear-gradient(45deg,transparent 49% ,black 0,black 51% ,transparent 0), linear-gradient(135deg,transparent 49% ,black 0,black 51% ,transparent 0);
 background-size: 30px 30px;

相當於是每個單元就漸變了兩條斜線。

斜格子

一直去拼這種單元可能讓你有點煩，於是出來了repeating-linear-gradient。

background: repeating-linear-gradient( 45deg, transparent, transparent 1em, moccasin 0, moccasin 2em, transparent 0, transparent 3em, powderblue 0, powderblue 4em, transparent 0, transparent 5em, lavender 0, lavender 6em, transparent 0, transparent 7em, beige 0, beige 8em), repeating-linear-gradient( -45deg, transparent, transparent 1em, khaki 0, khaki 2em, transparent 0, transparent 3em, beige 0, beige 4em, transparent 0, transparent 5em, peachpuff 0, peachpuff 6em );

注意到顏色都是成對出現。這樣才會出現我們的色條。注意這里使用了background-blend-mode: multiply; 混合模式。不然效果沒有這么好看。

圓點:

思路和上面一樣，使用徑向漸變疊加和錯位

 background-image:radial-gradient(#fff 5px,transparent 0),radial-gradient(#fff 10px, transparent 0);
 background-size: 40px;
 background-position: 0 0, 20px 20px;

沙發

沙發這個效果比較復雜，使用了徑向漸變制作圓點和陰影，線性漸變勾勒出線條。

 background:
radial-gradient(hsl(0, 100%, 27%) 4%, hsl(0, 100%, 18%) 9%, hsla(0, 100%, 20%, 0) 9%) 0 0,
                radial-gradient(hsl(0, 100%, 27%) 4%, hsl(0, 100%, 18%) 8%, hsla(0, 100%, 20%, 0) 10%) 50px 50px,
                radial-gradient(hsla(0, 100%, 30%, 0.8) 20%, hsla(0, 100%, 20%, 0)) 50px 0,
                radial-gradient(hsla(0, 100%, 30%, 0.8) 20%, hsla(0, 100%, 20%, 0)) 0 50px,
                radial-gradient(hsla(0, 100%, 20%, 1) 35%, hsla(0, 100%, 20%, 0) 60%) 50px 0,
                radial-gradient(hsla(0, 100%, 20%, 1) 35%, hsla(0, 100%, 20%, 0) 60%) 100px 50px,
                radial-gradient(hsla(0, 100%, 15%, 0.7), hsla(0, 100%, 20%, 0)) 0 0,
                radial-gradient(hsla(0, 100%, 15%, 0.7), hsla(0, 100%, 20%, 0)) 50px 50px,
　　　　　　　　  linear-gradient(45deg, hsla(0, 100%, 20%, 0) 49%, hsla(0, 100%, 0%, 1) 50%, hsla(0, 100%, 20%, 0) 70%) 0 0,
                linear-gradient(-45deg, hsla(0, 100%, 20%, 0) 49%, hsla(0, 100%, 0%, 1) 50%, hsla(0, 100%, 20%, 0) 70%) 0 0
                ;
background-color: #300; 
background-size: 100px 100px;

radial-gradient語法：

radial-gradient(
  [ [ circle || <length> ]                         [ at <position> ]? , |
    [ ellipse || [ <length> | <percentage> ]{2} ]  [ at <position> ]? , |
    [ [ circle | ellipse ] || <extent-keyword> ]   [ at <position> ]? , |
    at <position> ,
  ]?
  <color-stop> [ , <color-stop> ]+
)

看上去有點復雜，[]表示一個參數，[]?表示這個參數可選，| 表示這兩個參數二選一，||表示這兩個參數可以同時存在，'，'號表示這個參數結束。包含形狀，中心點位置，擴展關鍵字和顏色。形狀分圓形(circle)和橢圓(ellipse)，位置可以是長度/百分比/簡寫的left、center等。顏色和線性漸變一樣，比如漸變一個太陽：

 background:radial-gradient(at 45px 45px,rgb(248, 242, 209),gold,#FFF);

不過這里的at不僅影響着漸變的中心點而且還影響着漸變的形狀。 如果加上background-size我們可以得到一塊餅干：想吃么 (*^__^*) ……

而擴展關鍵字主要有下面幾種情況

closest-side：指定徑向漸變的半徑長度為從圓心到離圓心最近的邊

background:radial-gradient(circle closest-side ,aqua,gold);

closest-corner：指定徑向漸變的半徑長度為從圓心到離圓心最近的角

 background:radial-gradient(circle closest-corner  ,aqua,gold);

farthest-side：指定徑向漸變的半徑長度為從圓心到離圓心最遠的邊

 background:radial-gradient(circle farthest-side at 30% 30%  ,aqua,gold);

farthest-corner：指定徑向漸變的半徑長度為從圓心到離圓心最遠的角

 background:radial-gradient(circle farthest-corner at 30% 30%  ,aqua,gold);

 如果我們想畫出色圈呢，這就要用到線性漸變中的技巧。

 

background:radial-gradient(white 0,white 10%,red 0, red 20%,white 0,white 30%,red 0,red 40%,white 0,white 50%,red 0,red 60%,white 0,white 100%);

兩種顏色交替出現。然后也可以畫個藍天白雲： 接近小朋友的畫風...

疊加來個百葉窗：

小結：這些效果還是蠻有意思的，這一篇主要是學習了 linear-gradient，repeating-linear-gradient以及background-size、background-position來實現網格效果，最后還用到了radial-gradient，徑向漸變的花樣更多，所有的效果基本都是基於漸變疊加和重復，更多的效果可以參考下面的鏈接。

http://lea.verou.me/css3patterns/ 

http://bennettfeely.com/gradients/

http://www.cnblogs.com/lhb25/archive/2013/02/24/css3-radial-gradient.html

群中有此書的分享，不止於技術書籍。