css3詳解3課件chapter5漸變

CSS3漸變今日主打CSS3漸變CSS3線性漸變CSS3徑向漸變CSS3漸變漸變（gradients）可以在兩個或多個指定的顏色之間顯示平穩(wěn)的過渡兼容性IEChromeFireFoxSafariOpera10+26+16+6.1+12.1+10.0–webkit-3.6–moz-5.1–webkit-11.6–o-CSS3線性漸變線性漸變（LinearGradients）屬性是沿著一根軸線改變顏色，從起點到終點顏色進行順序漸變（從一邊拉向另一邊）語法background:linear-gradient(direction,color-stop1,color-stop2,...);舉個栗子CSS3線性漸變線性漸變-從上到下（默認）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線性漸變線性漸變–對角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線性漸變線性漸變–使用角度語法background:linear-gradient(angle,color-stop1,color-stop2,...);角度說明角度是指水平線和漸變線之間的角度，逆時針方向計算。0deg將創(chuàng)建一個從下到上的漸變，90deg將創(chuàng)建一個從左到右的漸變。CSS3線性漸變線性漸變–顏色結(jié)點語法background:linear-gradient(color1length|percentage,color2length|percentage,...);CSS3線性漸變線性漸變–重復(fù)漸變語法background:repeating-linear-gradient(color1length|percentage,color2length|percentage,...);CSS3徑向漸變徑向漸變（RadialGradients）屬性從起點到終點顏色從內(nèi)到外進行圓形漸變（從中間向外拉）語法background:radial-gradient(center,shapesize,start-color,...,last-color);舉個栗子CSS3徑向漸變徑向漸變-顏色結(jié)點均勻分布（默認）background:radial-gradient(color-stop1,color-stop2,...);CSS3徑向漸變徑向漸變-顏色結(jié)點不均勻分布background:radial-gradient(color1length|percentage,color2length|percentage,...);CSS3徑向漸變徑向漸變–設(shè)置形狀語法background:radial-gradient(shape,color-stop1,color-stop2,...);形狀說明circle——圓形ellipse——橢圓（默認）CSS3徑向漸變徑向漸變–尺寸大小關(guān)鍵字語法background:radial-gradient(size,color-stop1,color-stop2,...);關(guān)鍵字說明closest-side：最近邊f(xié)arthest-side：最遠邊closest-corner：最近角farthest-corner：最遠角CSS3徑向漸變徑向漸變–重復(fù)漸變語法background:repeating-radial-gradien(color1length|percentage,color2length|percentage,...