CSS3背景顏色漸變屬性(gradients)

css3 漸變

CSS3 漸變（gradient）可以讓你在兩個或多個指定的顏色之間顯示平穩的過渡。 以前，你必須使用圖像來實現這些效果，現在通過使用 CSS3 的漸變（gradients）即可實現。此外，漸變效果的元素在放大時看起來效果更好，因為漸變（gradient）是由瀏覽器生成的。

線性漸變

語法：

background: linear-gradient(direction, color-stop1, color-stop2, ...);

說明：

direction：默認為to bottom，即從上向下的漸變；

stop：顏色的分布位置，默認均勻分布，例如有3個顏色，各個顏色的stop均為33.33%。

1. 單一方向漸變:

	left 		從左邊開始
	right		從右邊開始
	top			從上邊開始
	bottom   	從底部開始
	注意: 需要添加兼容前綴

	to left 到左邊(結束位置)
	to right 到右邊
	to top	到頂部
	to bottom 到底部
	注意: 不要添加兼容前綴

2. 對角漸變:

	left top	左上開始
	left bottom 左下開始
	right top	右上開始
	注意: 帶兼容前綴
			
	to left top 到左上(結束位置)
	注意: 不帶兼容前綴

3. 角度的漸變
10deg 10度

4. 默認情況下顏色趨於均分
可以指定顏色分布的百分比,讓顏色按照百分比進行漸變
blue 10% 到10% 都是藍色
red 10px 到10px都是紅色

• 示例1：to left、top right、to bottom、to top
  
• 示例2：to right bottom、top right top、top left bottom、top left top
  
• 示例3：使用角度漸變linear-gradient(10deg, red, blue)

角度是指水平線和漸變線之間的角度，逆時針方向計算。

換句話說，0deg 將創建一個從下到上的漸變，90deg 將創建一個從左到右的漸變。

但是，請注意很多瀏覽器(Chrome,Safari,fiefox等)的使用了舊的標准，即 0deg 將創建一個從左到右的漸變，90deg 將創建一個從下到上的漸變。

換算公式 90 - x = y 其中 x 為標准角度，y為非標准角度。

徑向漸變(一定要加瀏覽器前綴)

徑向漸變不同於線性漸變，線性漸變是從“一個方向”向“另一個方向”的顏色漸變，而徑向漸變是從“一個點”向四周的顏色漸變

語法：

background: radial-gradient(center, shape, size, start-color, ..., last-color);
     
說明：

center：漸變起點的位置，可以為百分比，默認是圖形的正中心。

shape：漸變的形狀，ellipse表示橢圓形，circle表示圓形。默認為ellipse，如果元素形狀為正方形的元素，則ellipse和circle顯示一樣。

size：漸變的大小，即漸變到哪里停止，它有四個值。 closest-side：最近邊； farthest-side：最遠邊； closest-corner：最近角； farthest-corner：最遠角。

漸變位置:

	默認從中心到四周

	left	從左邊到四周的漸變
	right
	top
	bottom
				
	left top	從左上角到四周的漸變
	left bottom	
	right top
	...
				
	10px 30px	距離左邊10px 距離上邊30px

形狀:

	默認橢圓	ellipse
	正圓		circle
	注意: 元素是正方形,則都是正圓

大小:

	size：漸變的大小，即漸變到哪里停止，它有四個值。 
		closest-side：最近邊； 
		farthest-side：最遠邊； 
		closest-corner：最近角； 
		farthest-corner：最遠角。

• 示例1：多顏色節點均勻分布

div { background: -webkit-radial-gradient(50% 50%, farthest-corner, red, green, blue); } 
div { background: -webkit-radial-gradient(center, farthest-corner, red, green, blue); }

• 示例2：多顏色節點均勻分布

div { background: radial-gradient(circle, red, yellow, green); } 
div { background: radial-gradient(ellipse, red, yellow, green); }

• 示例3：設置漸變形狀

circle：漸變為最大的圓形； ellipse：根據元素形狀漸變，元素為正方形是顯示效果與circle無異

• 示例4：不同尺寸的漸變

div { background: radial-gradient(60% 40%, closest-side, blue, green, yellow, black); } 
div { background: radial-gradient(60% 40%, farthest-side, blue, green, yellow, black); }
div { background: radial-gradient(60% 40%, closest-corner, blue, green, yellow, black); }
div { background: radial-gradient(60% 40%, farthest-corner, blue, green, yellow, black);}

重復性漸變

1.重復性線性漸變

div { background: repeating-linear-gradient(red, yellow 10%, green 20%); }

2.重復性徑向漸變

div { background: repeating-radial-gradient(red, yellow 10%, green 20%); }