漸變屬性有：1、線性漸變“l(fā)inear-gradient()”，語法為“l(fā)inear-gradient(角度,顏色,顏色)”；2、徑向漸變“radial-gradient()”，語法為“radial-gradient(位置,顏色,顏色)”。

本教程操作環(huán)境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

漸變可以使得元素背景更加有靈性并具有生氣，雖然我們可以使用背景圖片來呈現漸變效果，但卻是不夠靈活，當想要改變顏色時需要使用圖片編輯器重新編輯，而漸變則可以在代碼中直接改變顏色就可以了。CSS3提供了兩種漸變方式，分別是線性漸變（linear-gradient）和徑向漸變（radial-0gradien）。

一、線性漸變（linear-gradient）

線性漸變就是沿著某個方向進行顏色上的漸變，可以使用左右上下以及對角線。

線性漸變語法：

background: linear-gradient(direction, color1, color2 [stop], color3...);

1、direaction：表示線性漸變的方向。有以下三種表示方法。

（1）漸變方向

• to left：設置漸變?yōu)閺挠业阶蟆?/li>
• to bottom：設置漸變從上到下。這是默認值。
• to right：設置漸變從左到右。
• to top：設置漸變從下到上。

也可以是to left top、to left bottom、to right top、to right bottom四個對角線方向。

（2）方向起點

• top：設置漸變從上到下。這是默認值。
• bottom：設置漸變從下到上。
• left：設置漸變從左到右。
• right：設置漸變?yōu)閺挠业阶蟆?/li>

也可以是left top、left bottom、right top、right bottom四個對角線方向。

（3）角度（angle）

角度用數字+單位來進行表示，單位使用deg。所有的顏色都是從中心出發(fā)，0deg是to top的方向，順時針是正，逆時針是負。

• 0deg相當于to top
• 90deg相當于to right
• 180deg相當于to bottom，這是默認值
• 270deg或者 – 90deg相當于to left

也相應地有45deg、135deg、225deg、315deg來表示對角線方向，但是使用角度表示方向相較于給定水平垂直方向更加靈活可以根據需要來調整角度，已達到想要的效果。

2、color- * ：表示漸變中的過度顏色，一般第一個表示漸變起始顏色，最后一個表示漸變的結束顏色，中間表示中間過度顏色。

3、stop：color后面可以加上stop，stop可以使百分值也可以是像素值，表示某個顏色在stop位置處固定，如下：

background: linear-gradient(to right, blue, green 20%, yellow 50%, purple 80%, red); //漸變起始顏色是藍色，當過度到20%時為綠色，也就是說在20%處恰好是綠色，然后繼續(xù)漸變過度到黃色，到50%處恰好是黃色，后面同個道理，直到結束顏色紅色，正好處于100%處。

二、重復線性漸變（repeating-linear-gradient）

說到線性漸變，我們不得不提一下重復線性漸變，有時我們想生成如下圖的條紋效果，我們最方便的方法就是重復線性漸變。

語法代碼：

background: repeating-linear-gradient(#f00 0,#f00 10%,#ff0 10%,#ff0 20%);

以上紅色從0開始漸變，到達10%時還是紅色，所以形成紅色條紋，在10%后變?yōu)辄S色，直到20%還是黃色，所以此時形成黃色條紋，然后渲染時會將這20%的紅黃條紋進行重復的漸變，使得呈現出紅黃條紋相間的效果。

我們也可以添加入方向

background: repeating-linear-gradient(45deg,#f00 0,#f00 10%,#ff0 10%,#ff0 20%);

三、徑向漸變（radial-gradient）

徑向漸變指從一個中心點開始沿著四周產生漸變效果。由其中心點、邊緣形狀輪廓及位置、色值結束點（color stops）定義而成。

當我們?yōu)橐粋€漸變設置多個顏色時，它們會平分這個100%的區(qū)域來漸變。當然除了百分比，我們也可以使用具體的像素來設置這個大小。像素設置的大小指的是從漸變圓心向外延伸的距離。

徑向漸變語法：

<radial-gradient> = radial-gradient([ [<shape> || <size>] [ at <position> ]? , | at <position>, ]?<color>[stop]?[ ,<color>[stop]?]+)

其中各種屬性的意思如下：

// 圓心位置 <position> = [ <length> | <percentage> | left | center | right ]? [ <length> |  <percentage> | top | center | bottom ]?  //默認處于中心點 // 漸變形狀 <shape> = circle | ellipse  //默認是ellipse // 漸變大小 <size> = <extent-keyword> | [ <circle-size> || <ellipse-size>] <extent-keyword> = closest-side | closest-corner | farthest-side | farthest-corner <circle-size> = <length> <ellipse-size> = [ <length> | <percentage> ]{2} <shape-size> = <length> | <percentage> // 漸變顏色及顏色位置 <color>[stop]? = <color> [ <length> | <percentage> ]?

上面需要詳細講明一下

我們在漸變定義時可以直接定義漸變的形狀，但除了這種方式，還可以通過為size傳入具體值在確定漸變形狀，具體說明如下：

1、當傳入一個大小參數size或者兩個相同值得size時，則表示該漸變形狀是圓。

background: radial-gradient(60px,#f00 0,#ff0 100%);

2、當傳入兩個大小不同的size參數時，則表示該漸變形狀為橢圓。

background: radial-gradient(100px 60px,#f00 0,#ff0 100%);

四、重復徑向漸變（repeating-radial-gradient）

上面再說線性漸變時有說到線性漸變具有重復線性漸變，為徑向漸變同樣具有重復徑向漸變，先看一個簡單例子。

background: repeating-radial-gradient(circle at center,#f00 0,#f00 10%, #ff0 10%,#ff0 20%);

重復徑向漸變總體上與重復線性漸變差不多，只是重復線性漸變是一個方向上的重復漸變，不論是水平垂直還是對角線，如下圖，左邊為0%，右邊為100%。

然而重復徑向則是以圓心為中心點，以放射性方式漸變，中心點為0%，圓邊界為100%。

關于上面重復徑向漸變是如何生成條紋相間的就 不多加述說，原理和重復線性漸變相同。

下面給出一個重復徑向漸變的實用例子，使用重復徑向漸變生成一個唱片的效果 。

HTML：

<p class='record-container'>      <p class='record'></p> </p>

CSS：

.record-container {      display: inline-block;      overflow: hidden;      width: 400px;      height: 300px;      border-radius: 10px;      box-shadow: 0 6px #99907e;      background: #b5ac9a; }          .record {      position: relative;      margin: 19px auto;      width: 262px;      height: 262px;      border-radius: 50%;      background: linear-gradient(30deg, transparent 40%, rgba(42, 41, 40, .85) 40%)  no-repeat 100% 0, linear-gradient(60deg, rgba(42, 41, 40, .85) 60%, transparent 60%)  no-repeat 0 100%, repeating-radial-gradient(#2a2928, #2a2928 4px, #ada9a0 5px,  #2a2928 6px);      background-size: 50% 100%, 100% 50%, 100% 100%; }     .record:after {      position: absolute;      top: 50%;      left: 50%;      margin: -35px;      border: solid 1px #d9a388;      width: 68px;      height: 68px;      border-radius: 50%;      box-shadow: 0 0 0 4px #da5b33, inset 0 0 0 27px #da5b33;      background: #b5ac9a;      content: ''; }

推薦學習：css視頻教程