css3詳解3課件chapter5漸變

CSS3漸變今日主打CSS3漸變CSS3線性漸變CSS3徑向漸變CSS3漸變漸變（gradients）可以在兩個(gè)或多個(gè)指定的顏色之間顯示平穩(wěn)的過渡兼容性IEChromeFireFoxSafariOpera10+26+16+6.1+12.1+10.0–webkit-3.6–moz-5.1–webkit-11.6–o-CSS3線性漸變線性漸變（LinearGradients）屬性是沿著一根軸線改變顏色，從起點(diǎn)到終點(diǎn)顏色進(jìn)行順序漸變（從一邊拉向另一邊）語(yǔ)法background:linear-gradient(direction,color-stop1,color-stop2,...);舉個(gè)栗子CSS3線性漸變線性漸變-從上到下（默認(rèn)）background:linear-gradient(color-stop1,color-stop2,...);CSS3線性漸變線性漸變-從左到右background:-webkit-linear-gradient(begin-direction,color-stop1,color-stop2,...);background:-moz-linear-gradient(end-direction,color-stop1,color-stop2,...);background:-o-linear-gradient(end-direction,color-stop1,color-stop2,...);background:linear-gradient(toend-direction,color-stop1,color-stop2,...);CSS3線性漸變線性漸變–對(duì)角background:-webkit-linear-gradient(begin-level

begin-vertical,color-stop1,color-stop2,...);background:-moz-linear-gradient(end-level

end-vertical,color-stop1,color-stop2,...);background:-o-linear-gradient(end-level

end-vertical,color-stop1,color-stop2,...);background:linear-gradient(to

end-level

end-vertical,color-stop1,color-stop2,...);CSS3線性漸變線性漸變–使用角度語(yǔ)法background:linear-gradient(angle,color-stop1,color-stop2,...);角度說明角度是指水平線和漸變線之間的角度，逆時(shí)針方向計(jì)算。0deg將創(chuàng)建一個(gè)從下到上的漸變，90deg將創(chuàng)建一個(gè)從左到右的漸變。CSS3線性漸變線性漸變–顏色結(jié)點(diǎn)語(yǔ)法background:linear-gradient(color1length|percentage,color2length|percentage,...);CSS3線性漸變線性漸變–重復(fù)漸變語(yǔ)法background:repeating-linear-gradient(color1length|percentage,color2length|percentage,...);CSS3徑向漸變徑向漸變（RadialGradients）屬性從起點(diǎn)到終點(diǎn)顏色從內(nèi)到外進(jìn)行圓形漸變（從中間向外拉）語(yǔ)法background:radial-gradient(center,shapesize,start-color,...,last-color);舉個(gè)栗子CSS3徑向漸變徑向漸變-顏色結(jié)點(diǎn)均勻分布（默認(rèn)）background:radial-gradient(color-stop1,color-stop2,...);CSS3徑向漸變徑向漸變-顏色結(jié)點(diǎn)不均勻分布background:radial-gradient(color1length|percentage,color2length|percentage,...);CSS3徑向漸變徑向漸變–設(shè)置形狀語(yǔ)法background:radial-gradient(shape,color-stop1,color-stop2,...);形狀說明circle——圓形ellipse——橢圓（默認(rèn)）CSS3徑向漸變徑向漸變–尺寸大小關(guān)鍵字語(yǔ)法background:radial-gradient(size,color-stop1,color-stop2,...);關(guān)鍵字說明closest-side：最近邊f(xié)arthest-side：最遠(yuǎn)邊closest-corner：最近角farthest-corner：最遠(yuǎn)角CSS3徑向漸變徑向漸變–重復(fù)漸變語(yǔ)法background:repeating-radial-gradien(color1length|percentage,color2length|percentage,...