?漸變

(瀏覽器支持不是很好,可能無(wú)法顯示時(shí)用: -ms-? -o-? -m0z-? -webkit-)

分兩種:? ? ? ?

線性漸變:linear-gradient? (橫著的線)? ? ? ? ? ? ? ? ? ? ? 至少定義兩種顏色值

徑向漸變r(jià)adial -gradient? （豎著漸變）

1. 線性漸變：

寫(xiě)法: background:linear-gradient(red,blue);? 至少兩種顏色

線性漸變,顏色從左到右的寫(xiě)法

background: linear-gradient(to right,red,blue);? to right? 定義了? 第一個(gè)顏色向 右 過(guò)渡。

background:linear-gradient(to bottom right,red,blue);? ? 對(duì)角漸變,? 第一個(gè)顏色向 右下過(guò)渡。

同樣,可以使用角度,來(lái)做漸變效果。 寫(xiě)法:

background:linear-gradient(角度,red，blue);

即 0deg 將創(chuàng)建一個(gè)從左到右的漸變，90deg 將創(chuàng)建一個(gè)從下到上的漸變。

重復(fù)的線性漸變? ? ? ? ? %定義顏色的寬度

background: repeating-linear-gradient(to right,red,blue 10%,green 20%)

2. 徑向漸變:(理解為有某個(gè)點(diǎn)向四周擴(kuò)散)

background: radial-gradient(red,yellow,green);

也可加入%定義大小

background: radial-gradient(red 20%,yellow 50%,green 3%);

徑向漸變有兩個(gè)值,規(guī)定的漸變是圓形還是橢圓,默認(rèn)值市橢圓形

circle? 定義圓形,? ? 默認(rèn)值? ellipse 橢圓形

background: radial-gradient(red,yellow,green);

重復(fù)的徑向漸變

background:repeating-radial-gradient(red,yellow,blue)