畫了幾個(gè)漂亮的漸變色，暫時(shí)不考慮兼容性問(wèn)題了，嘿嘿。

代碼：

background-image: linear-gradient(0deg, #fff 0%,#000 100%);

上面是主代碼，括號(hào)內(nèi)的0deg是角度，后面跟著一個(gè)顏色和顏色開(kāi)始的位置，后面跟著另一個(gè)顏色和顏色結(jié)束的位置，可以寫很多個(gè)顏色，標(biāo)注好位置就好。

樣式1

background-image: linear-gradient(160deg, #b100ff 20%,#00b3ff 80%);

樣式2

background-image: linear-gradient(160deg, #ff0064 20%,#ca00ff 80%);

樣式3

background-image: linear-gradient(160deg, #0078ff 20%,#002abb 80%);

樣式4

background-image: linear-gradient(160deg, #00ffd5 20%,#008cff 80%);

樣式5

background-image: linear-gradient(160deg, #ffce00 20%,#ff8b00 80%);

樣式6

background-image: linear-gradient(160deg, #a200ff 20%,#cf3700 80%);

線性漸變：

background:linear-gradient(設(shè)置漸變形式,第一個(gè)顏色起點(diǎn),中間顏色點(diǎn) 中間顏色的位置,結(jié)束點(diǎn)顏色);

Linear:漸變的類型（線性漸變）；

漸變的形式：可選參數(shù) 有兩種方式-1、設(shè)置旋轉(zhuǎn)角度，0度代表水平從左到右，90度就是從上到下啦，從0度開(kāi)始逆時(shí)針變換。

使用關(guān)鍵字，left代表從左到右，top代表從上到下，同理right就是從右到左，lefttop-從坐上到右下，同理leftbottom，righttop，rightbottom。

中間顏色與中間顏色位置為可選參數(shù)。

不過(guò)要考慮瀏覽器的兼容，咱們這樣寫：

-webkit-gradient（linear,0  0,0  100%,from(起始顏色,to(結(jié)束顏色)）；  /*for Safari4+,Chrome 2+*/

-webkit-linear-gradient（起始顏色, 結(jié)束顏色）；  /*for Safari 5.1+,Chrome 10+*/

-moz-linear-gradient（起始顏色, 結(jié)束顏色）；  /*for firefox*/

-o-linear-gradient（起始顏色, 結(jié)束顏色）；  /*Opera*/

linear-gradient（起始顏色, 結(jié)束顏色）；  /*標(biāo)準(zhǔn)屬性*/