這篇文章主要介紹了css3中漸變屬性式是什么，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
創(chuàng)新互聯(lián)專注于醴陵企業(yè)網(wǎng)站建設(shè),成都響應(yīng)式網(wǎng)站建設(shè)公司,購物商城網(wǎng)站建設(shè)。醴陵網(wǎng)站建設(shè)公司,為醴陵等地區(qū)提供建站服務(wù)。全流程按需求定制網(wǎng)站，專業(yè)設(shè)計，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)
css的基本語法是：1、css規(guī)則由選擇器和一條或多條聲明兩個部分構(gòu)成；2、選擇器通常是需要改變樣式的HTML元素；3、每條聲明由一個屬性和一個值組成；4、屬性和屬性值被冒號分隔開。
漸變屬性有：1、線性漸變“l(fā)inear-gradient()”，語法為“l(fā)inear-gradient(角度,顏色,顏色)”；2、徑向漸變“radial-gradient()”，語法為“radial-gradient(位置,顏色,顏色)”。
本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
漸變可以使得元素背景更加有靈性并具有生氣，雖然我們可以使用背景圖片來呈現(xiàn)漸變效果，但卻是不夠靈活，當(dāng)想要改變顏色時需要使用圖片編輯器重新編輯，而漸變則可以在代碼中直接改變顏色就可以了。CSS3提供了兩種漸變方式，分別是線性漸變（linear-gradient）和徑向漸變（radial-0gradien）。
線性漸變就是沿著某個方向進(jìn)行顏色上的漸變，可以使用左右上下以及對角線。
線性漸變語法：
background: linear-gradient(direction, color1, color2 [stop], color3...);
1、direaction：表示線性漸變的方向。有以下三種表示方法。
（1）漸變方向
to left：設(shè)置漸變?yōu)閺挠业阶蟆?/p>
to bottom：設(shè)置漸變從上到下。這是默認(rèn)值。
to right：設(shè)置漸變從左到右。
to top：設(shè)置漸變從下到上。
也可以是to left top、to left bottom、to right top、to right bottom四個對角線方向。
（2）方向起點(diǎn)
top：設(shè)置漸變從上到下。這是默認(rèn)值。
bottom：設(shè)置漸變從下到上。
left：設(shè)置漸變從左到右。
right：設(shè)置漸變?yōu)閺挠业阶蟆?/p>
也可以是left top、left bottom、right top、right bottom四個對角線方向。
（3）角度（angle）
角度用數(shù)字+單位來進(jìn)行表示，單位使用deg。所有的顏色都是從中心出發(fā)，0deg是to top的方向，順時針是正，逆時針是負(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來表示對角線方向，但是使用角度表示方向相較于給定水平垂直方向更加靈活可以根據(jù)需要來調(diào)整角度，已達(dá)到想要的效果。
2、color- * ：表示漸變中的過度顏色，一般第一個表示漸變起始顏色，最后一個表示漸變的結(jié)束顏色，中間表示中間過度顏色。
3、stop：color后面可以加上stop，stop可以使百分值也可以是像素值，表示某個顏色在stop位置處固定，如下：
background: linear-gradient(to right, blue, green 20%, yellow 50%, purple 80%, red); //漸變起始顏色是藍(lán)色，當(dāng)過度到20%時為綠色，也就是說在20%處恰好是綠色，然后繼續(xù)漸變過度到黃色，到50%處恰好是黃色，后面同個道理，直到結(jié)束顏色紅色，正好處于100%處。
說到線性漸變，我們不得不提一下重復(fù)線性漸變，有時我們想生成如下圖的條紋效果，我們最方便的方法就是重復(fù)線性漸變。
語法代碼：
background: repeating-linear-gradient(#f00 0,#f00 10%,#ff0 10%,#ff0 20%);
以上紅色從0開始漸變，到達(dá)10%時還是紅色，所以形成紅色條紋，在10%后變?yōu)辄S色，直到20%還是黃色，所以此時形成黃色條紋，然后渲染時會將這20%的紅黃條紋進(jìn)行重復(fù)的漸變，使得呈現(xiàn)出紅黃條紋相間的效果。
我們也可以添加入方向
background: repeating-linear-gradient(45deg,#f00 0,#f00 10%,#ff0 10%,#ff0 20%);
徑向漸變指從一個中心點(diǎn)開始沿著四周產(chǎn)生漸變效果。由其中心點(diǎn)、邊緣形狀輪廓及位置、色值結(jié)束點(diǎn)（color stops）定義而成。
當(dāng)我們?yōu)橐粋€漸變設(shè)置多個顏色時，它們會平分這個100%的區(qū)域來漸變。當(dāng)然除了百分比，我們也可以使用具體的像素來設(shè)置這個大小。像素設(shè)置的大小指的是從漸變圓心向外延伸的距離。
徑向漸變語法：
= radial-gradient([ [ || ] [ at ]? , | at , ]? [stop]?[ , [stop]?]+)
其中各種屬性的意思如下：
// 圓心位置= [ | | left | center | right ]? [ | | top | center | bottom ]? //默認(rèn)處于中心點(diǎn) // 漸變形狀 = circle | ellipse //默認(rèn)是ellipse // 漸變大小 = | [ || ] = closest-side | closest-corner | farthest-side | farthest-corner = = [ | ]{2} = | // 漸變顏色及顏色位置 [stop]? = [ | ]?
上面需要詳細(xì)講明一下
我們在漸變定義時可以直接定義漸變的形狀，但除了這種方式，還可以通過為size傳入具體值在確定漸變形狀，具體說明如下：
1、當(dāng)傳入一個大小參數(shù)size或者兩個相同值得size時，則表示該漸變形狀是圓。
background: radial-gradient(60px,#f00 0,#ff0 100%);
2、當(dāng)傳入兩個大小不同的size參數(shù)時，則表示該漸變形狀為橢圓。
background: radial-gradient(100px 60px,#f00 0,#ff0 100%);
四、重復(fù)徑向漸變（repeating-radial-gradient）
上面再說線性漸變時有說到線性漸變具有重復(fù)線性漸變，為徑向漸變同樣具有重復(fù)徑向漸變，先看一個簡單例子。
background: repeating-radial-gradient(circle at center,#f00 0,#f00 10%, #ff0 10%,#ff0 20%);
重復(fù)徑向漸變總體上與重復(fù)線性漸變差不多，只是重復(fù)線性漸變是一個方向上的重復(fù)漸變，不論是水平垂直還是對角線，如下圖，左邊為0%，右邊為100%。
然而重復(fù)徑向則是以圓心為中心點(diǎn)，以放射性方式漸變，中心點(diǎn)為0%，圓邊界為100%。
關(guān)于上面重復(fù)徑向漸變是如何生成條紋相間的就 不多加述說，原理和重復(fù)線性漸變相同。
下面給出一個重復(fù)徑向漸變的實(shí)用例子，使用重復(fù)徑向漸變生成一個唱片的效果 。
HTML：
重慶分公司
重慶分公司
