CSS3 background color gradient property (Gradients)

css3 gradient

CSS3 Gradient (gradient) allows you to display a smooth transition between two or more specified colors. Previously, you have to use images to achieve these effects through the use of CSS3 gradient (gradients) can be realized now. In addition, elements gradient look better when enlarged, because the gradient (gradient) is generated by the browser.

Linear gradient

语法：

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

说明：

direction：默认为to bottom，即从上向下的渐变；

stop：颜色的分布位置，默认均匀分布，例如有3个颜色，各个颜色的stop均为33.33%。

1. Single gradient direction:

	left 		从左边开始
	right		从右边开始
	top			从上边开始
	bottom   	从底部开始
	注意: 需要添加兼容前缀

	to left 到左边(结束位置)
	to right 到右边
	to top	到顶部
	to bottom 到底部
	注意: 不要添加兼容前缀

2. Diagonal Gradient:

	left top	左上开始
	left bottom 左下开始
	right top	右上开始
	注意: 带兼容前缀
			
	to left top 到左上(结束位置)
	注意: 不带兼容前缀

3. The gradient angle of
10deg 10 degrees

4. The default color tended to split the case
can specify the percentage of the color distribution, so as a percentage of the gradient colors
blue 10% to 10% are blue
red 10px to 10px is red

• 示例1：to left、top right、to bottom、to top
  
• 示例2：to right bottom、top right top、top left bottom、top left top
  
• Example 3: using a gradient angle linear-gradient (10deg, red, blue)

角度是指水平线和渐变线之间的角度，逆时针方向计算。

换句话说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。

但是，请注意很多浏览器(Chrome,Safari,fiefox等)的使用了旧的标准，即 0deg 将创建一个从左到右的渐变，90deg 将创建一个从下到上的渐变。

换算公式 90 - x = y 其中 x 为标准角度，y为非标准角度。

Radial gradient (be sure to add browser prefixes)

径向渐变不同于线性渐变，线性渐变是从“一个方向”向“另一个方向”的颜色渐变，而径向渐变是从“一个点”向四周的颜色渐变

语法：

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：最远角。

Gradient Location:

	默认从中心到四周

	left	从左边到四周的渐变
	right
	top
	bottom
				
	left top	从左上角到四周的渐变
	left bottom	
	right top
	...
				
	10px 30px	距离左边10px 距离上边30px

shape:

	默认椭圆	ellipse
	正圆		circle
	注意: 元素是正方形,则都是正圆

size:

	size：渐变的大小，即渐变到哪里停止，它有四个值。 
		closest-side：最近边； 
		farthest-side：最远边； 
		closest-corner：最近角； 
		farthest-corner：最远角。

• Example 1: Multi-color uniform distribution node

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

• Example 2: Multi-color uniform distribution node

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

• Example 3: Shape gradient provided

circle：渐变为最大的圆形； ellipse：根据元素形状渐变，元素为正方形是显示效果与circle无异

• Example 4: Different sizes gradation

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);}

Repeatability gradient

1. Repeatability linear gradient

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

2. Repetitive radial gradient

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