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

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

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

一、線(xiàn)性漸變（linear-gradient）

線(xiàn)性漸變就是沿著某個(gè)方向進(jìn)行顏色上的漸變，可以使用左右上下以及對(duì)角線(xiàn)。

線(xiàn)性漸變語(yǔ)法：

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

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

（1）漸變方向

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

也可以是to left top、to left bottom、to right top、to right bottom四個(gè)對(duì)角線(xiàn)方向。

（2）方向起點(diǎn)

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

也可以是left top、left bottom、right top、right bottom四個(gè)對(duì)角線(xiàn)方向。

（3）角度（angle）

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

• 0deg相當(dāng)于to top
• 90deg相當(dāng)于to right
• 180deg相當(dāng)于to bottom，這是默認(rèn)值
• 270deg或者 – 90deg相當(dāng)于to left

也相應(yīng)地有45deg、135deg、225deg、315deg來(lái)表示對(duì)角線(xiàn)方向，但是使用角度表示方向相較于給定水平垂直方向更加靈活可以根據(jù)需要來(lái)調(diào)整角度，已達(dá)到想要的效果。

2、color- * ：表示漸變中的過(guò)度顏色，一般第一個(gè)表示漸變起始顏色，最后一個(gè)表示漸變的結(jié)束顏色，中間表示中間過(guò)度顏色。

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

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

二、重復(fù)線(xiàn)性漸變（repeating-linear-gradient）

說(shuō)到線(xiàn)性漸變，我們不得不提一下重復(fù)線(xiàn)性漸變，有時(shí)我們想生成如下圖的條紋效果，我們最方便的方法就是重復(fù)線(xiàn)性漸變。

語(yǔ)法代碼：

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

以上紅色從0開(kāi)始漸變，到達(dá)10%時(shí)還是紅色，所以形成紅色條紋，在10%后變?yōu)辄S色，直到20%還是黃色，所以此時(shí)形成黃色條紋，然后渲染時(shí)會(huì)將這20%的紅黃條紋進(jìn)行重復(fù)的漸變，使得呈現(xiàn)出紅黃條紋相間的效果。

我們也可以添加入方向

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

三、徑向漸變（radial-gradient）

徑向漸變指從一個(gè)中心點(diǎn)開(kāi)始沿著四周產(chǎn)生漸變效果。由其中心點(diǎn)、邊緣形狀輪廓及位置、色值結(jié)束點(diǎn)（color stops）定義而成。

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

徑向漸變語(yǔ)法：

<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 ]?  //默認(rèn)處于中心點(diǎn) // 漸變形狀 <shape> = circle | ellipse  //默認(rèn)是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> ]?

上面需要詳細(xì)講明一下

我們?cè)跐u變定義時(shí)可以直接定義漸變的形狀，但除了這種方式，還可以通過(guò)為size傳入具體值在確定漸變形狀，具體說(shuō)明如下：

1、當(dāng)傳入一個(gè)大小參數(shù)size或者兩個(gè)相同值得size時(shí)，則表示該漸變形狀是圓。

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

2、當(dāng)傳入兩個(gè)大小不同的size參數(shù)時(shí)，則表示該漸變形狀為橢圓。

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

四、重復(fù)徑向漸變（repeating-radial-gradient）

上面再說(shuō)線(xiàn)性漸變時(shí)有說(shuō)到線(xiàn)性漸變具有重復(fù)線(xiàn)性漸變，為徑向漸變同樣具有重復(fù)徑向漸變，先看一個(gè)簡(jiǎn)單例子。

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

重復(fù)徑向漸變總體上與重復(fù)線(xiàn)性漸變差不多，只是重復(fù)線(xiàn)性漸變是一個(gè)方向上的重復(fù)漸變，不論是水平垂直還是對(duì)角線(xiàn)，如下圖，左邊為0%，右邊為100%。

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

關(guān)于上面重復(fù)徑向漸變是如何生成條紋相間的就 不多加述說(shuō)，原理和重復(fù)線(xiàn)性漸變相同。

下面給出一個(gè)重復(fù)徑向漸變的實(shí)用例子，使用重復(fù)徑向漸變生成一個(gè)唱片的效果 。

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: ''; }

推薦學(xué)習(xí)：css視頻教程