css3漸變
線性漸變(Linear Gradient)- 向下/向上/向左/向右/對角方向
徑向漸變(Radial Gradient)- 由它們的中心定義
repeating-linear-gradient() 函數(shù)用于重復線性漸變:
線性漸變:linear-gradient:
徑向漸變?radial-gradient?:
線性漸變 (默認從上向下)
1、background: linear-gradient(red, blue); 基本的漸變,默認從上向下
2、background: linear-gradient(to right, red , blue); 從左向右的漸變
3、background: linear-gradient(to bottom right, red , blue);從左上角到右下角/
4、background: linear-gradient(180deg, red, blue);帶有指定角度的漸變
5、background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));使用透明色漸變,
transparent透明色/
重復的線性漸變 background: repeating-linear-gradient(red, yellow 10%, green 20%);
徑向漸變
1、background: radial-gradient(red, green, blue);顏色結(jié)點均勻分布的徑向漸變:
2、 background: radial-gradient(red 5%, green 15%, blue 60%); 顏色節(jié)點分布不均勻
3、 background: repeating-radial-gradient(red, yellow 10%, green 15%); 重復的徑向漸變
設置形狀
shape 參數(shù)定義了形狀。它可以是值 circle 或 ellipse。其中,circle 表示圓形,ellipse 表示橢圓形。默認值是 ellipse。
形狀為圓形的徑向漸變:
background: radial-gradient(circle, red, yellow, green);
css3中transform可以實現(xiàn)文字或圖像的旋轉(zhuǎn)(rotate)、縮放(scale)、傾斜(skew)、移動(translate)的變形效果。
?旋轉(zhuǎn)、縮放、傾斜和移動,這四種變形效果進行結(jié)合使用,并且使用的先后順序不同,頁面顯示的結(jié)果會有區(qū)別。
使用語法:
transform:功能;
-ms-transform:功能; / IE 9/
-moz-transform:功能; / Firefox/
-webkit-transform:功能; / Safari 和 Chrome/
-o-transform:功能; / Opera/
另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn,海內(nèi)外云服務器15元起步,三天無理由+7*72小時售后在線,公司持有idc許可證,提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢,專為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應用場景需求。