ss3的漸層如何使用

這次給大家帶來ss3的漸層如何使用，使用ss3的漸層的注意事項有哪些，下面就是實戰案例，一起來看一下。

《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，放射狀漸層的花樣更多，所有的效果基本都是基於漸層疊加和重複，更多的效果可以參考下面的連結。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

jQuery、Angular、node中的Promise詳解

H5的視頻播放庫video.js詳解