CSS3 漸變可以讓你在兩個(gè)或多個(gè)指定的顏色之間顯示平穩(wěn)的過渡
CSS3 定義了兩種類型漸變
- 線性漸變:向上凉逛、向下、向左寂祥、向右、對(duì)角
- 徑向漸變:由中心定義
線性漸變
background-image: linear-gradient(red, green);//從上向下的
background-image: linear-gradient(to top, red, green);//從下向上的
background-image: linear-gradient(to right,red, green);//從左向右的
background-image: linear-gradient(to left,red, green);//從右向左的
background-image: linear-gradient(to bottom right,red, green);//對(duì)角
background-image: linear-gradient(to right, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));//透明漸變
background-image: repeating-linear-gradient(45deg, red, yellow 7%, green 10%);//重復(fù)線性漸變
background-image: repeating-linear-gradient( red 10%, yellow 85%, green 5%);//不均勻分布漸變
徑向漸變
background-image: radial-gradient(pink, skyblue, rgb(219, 219, 150));//均勻
background-image: radial-gradient(red 5%, green 15%, blue 60%); //不均勻
background-image: repeating-radial-gradient(red, yellow 10%, green 15%);//不斷重復(fù)漸變
設(shè)置形狀:shape 參數(shù)定義了形狀藕夫∮郏可以是circle(圓形)或者ellipse(橢圓型)
注意：一般默認(rèn)為橢圓形
background-image: radial-gradient(circle, red, yellow, green);
//設(shè)置為圓形
