CSS3渐变效果（20160827-0027）

CSS3 背景渐变，主要有两种形式：线性渐变和径向渐变。

一、线性渐变

语法：linear-gradient(方位, 起始色, 末尾色)

通过top、left、right、bottom这四组实现的渐变方向比较单一，可以使用角度单位的数值来设置方位。比如0度（0deg）相当于to top；角度会沿逆时针方向随着角度的增加而增加。

@charset "utf-8";

p{
	/* 设置宽高方便观察 */
	width: 400px;
	height: 400px;
	border:solid 1px silver;
}

/********************** 线性渐变 **********************/
/* 简单的线性渐变和斜的线性渐变 */
p{
	/* 两个必须参数，这是会发现渐变是自上而下的，呈线性渐变 */
	/*background-image:linear-gradient(orange, green);*/

	/* 添加一个向上的方位，to 表示向哪个方向，这里表示自下而上 */
	/*background-image: linear-gradient(to top, orange, green);*/

	/* 添加一个向左的方位 */
	/*background-image: linear-gradient(to left, orange, green);*/

	/* 添加一个斜向的线性渐变*/
	/*background-image: linear-gradient(to top left, orange, green);*/
}
/* 通过角度设置方位的线性渐变，0 ~ 360 度之间，可以是负值 */
p{
	/* 0 度相当于to top */
	/*background-image: linear-gradient(0deg, orange, green);*/
	/* 随着角度的变化，沿顺时针方向变化 */
	/* 45 度相当于to top right */
	/*background-image: linear-gradient(45deg, orange, green);*/
	/*background-image: linear-gradient(60deg, orange, green);*/
	/* 90 度相当于to right */
	/*background-image: linear-gradient(90deg, orange, green);*/
	/* 180 度相当于to bottom */
	/*background-image: linear-gradient(180deg, orange, green);*/

	/* 角度也可以是负值，沿逆时针方向变化  */
	/* -45 度相当于to top left */
	/*background-image: linear-gradient(-45deg, orange, green);*/
	/* -90 度相当于to left */
	/*background-image: linear-gradient(-90deg, orange, green);*/
}
/* 多种颜色的渐变 */
p{
	/*background-image: linear-gradient(orange, green, red, blue);*/
}
/* 默认情况下，起始颜色的百分比位置是0%，末尾颜色的百分比位置是100%，其它位置按照平均值分配。位置也可以使用px像素来设定，但计算麻烦点。
例如 background-image: linear-gradient(orange, green, red, blue); 
orange 位置是0%，green 位置是33.33%，red 位置是66.66%，blue 是100%。比例是在渐变的方向上计算的。
0% - 33.33% 之间是orange 到 green 的渐变，
33.33％ - 66.66% 之间是green 到 red 的渐变，
66.66% - 100% 是red 到 blue 的渐变。

提示：如果设置起始颜色的位置不是0% 的话，会出现起始颜色位置之前的区域是起始色。
如果设置的末尾颜色的位置不是100% 的话，会出现末位颜色位置之后的区域是末位色。
 */
p{
	/* 改变起始颜色和末位颜色的位置 */
	/*background-image: linear-gradient(orange 25%, green 50%, blue 75%);*/

	/* 如果想要起始颜色之前的区域为透明，添加一个新的起始颜色，把这个新的起始颜色设置为透明就可以了 */
	/*background-image: linear-gradient(rgba(0, 0, 0, 0) 25%,orange 25%, green 50%, blue 75%);*/
	/* 如果想要末尾颜色之前的区域为透明，添加一个新的末尾颜色，把这个新的末尾颜色设置为透明就可以了 */
	/*background-image: linear-gradient(orange 25%, green 50%, blue 75%, rgba(0, 0, 0, 0) 75%);*/
	/* 如果想要起始、末尾颜色之前的区域为透明，添加新的起始和末尾颜色，把新的起始和末尾颜色都设置为透明就可以了*/
	/*background-image: linear-gradient(rgba(0, 0, 0, 0) 25%, orange 25%, green 50%, blue 75%, rgba(0, 0, 0, 0) 75%);*/

	/* 可以通过添加方位，来改变渐变的方向 */
	/*background-image: linear-gradient(to top right, orange 25%, green 50%, blue 75%);*/
	/*background-image: linear-gradient(to left, orange 25%, green 50%, blue 75%);*/

	/* 用 px像素来设定位置 */
	/*background-image: linear-gradient(orange 0px, green 200px, blue 400px);*/
}
/* 结合背景，并使用透明渐变实现层次感*/
p{
	/*background-color: red;*/
	/*background-image: linear-gradient(to top right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0))*/
}
/* 之前的渐变都不是重复的，也可以设置重复渐变 */
p{
	/*background-image: repeating-linear-gradient(to top right, orange 10px, green 30px);*/
}
/* 加上兼容前缀,支持带前缀和不支持带前缀的完整格式 */
p{
	/*background-image: -webkit-linear-gradient(to top right, orange, green);
	background-image: -moz-linear-gradient(to top right, orange, green);
	background-image: -o-linear-gradient(to top right, orange, green);
	background-image: linear-gradient(to top right, orange, green);*/
}

提示：repeating-linear-gradient 属性值和 linear-gradient 基本相同。

二、径向渐变（也叫放射性渐变）

径向渐变：radial-gradient 属性值。它是从一个点向四周发散的方式扩展。

语法：radial-gradient(方位, 起始色, 末尾色)

属性值样式表：

/* 简单的径向渐变 */
p{
	/* 两个必选参数 */
	/*background-image: radial-gradient(green, blue, red);*/

	/* 如果想设置第一个可选参数，有一种做法是设置为：circle（圆形）或ellipse（椭圆形）。默认是椭圆形 */
	/*background-image: radial-gradient(circle, green, blue, red);*/
}
/* 设置径向渐变的发散方向 */
p{
	/* 设置从底部发散 */
	/*background-image: radial-gradient(circle at bottom , green, blue, red);*/
	/* 复合方向，设置从右上发散 */
	/*background-image: radial-gradient(circle at top right , green, blue, red);*/
}
/* 设置发散的距离，即圆的半径长度 */
p{
	/* 指定径向渐变的半径长度为从圆心到离圆心最近的边 */
	/*background-image: radial-gradient(circle closest-side, green, blue, red);*/
	/* 指定径向渐变的半径长度为从圆心到离圆心最近的角 */
	/*background-image: radial-gradient(circle closest-corner, green, blue, red);*/
	/* 指定径向渐变的半径长度为从圆心到离圆心最远的边 */
	/*background-image: radial-gradient(circle farthest-side, green, blue, red);*/
	/* 指定径向渐变的半径长度为从圆心到离圆心最远的角 */
	/*background-image: radial-gradient(circle farthest-corner, green, blue, red);*/


	/* 也可以用像素表示半径 */
	/*background-image: radial-gradient(circle 50px, green, blue, red);*/
	/*background-image: radial-gradient(circle 250px, green, blue, red);*/
}
/* 之前的渐变都不是重复的，也可以设置重复渐变 */
p{
	/*background-image: repeating-radial-gradient(circle 50px, green, blue, red);*/
}
/* 加上兼容前缀 */
p{
	/*background-image: -webkit-radial-gradient(circle, green, blue, red);
	background-image: -moz-radial-gradient(circle, green, blue, red);
	background-image: -o-radial-gradient(circle, green, blue, red);
	background-image: radial-gradient(circle, green, blue, red);*/
}
/* 重复背景加上兼容前缀就是兼容模式了 */
p{
	/*background-image: -webkit-radial-gradient;
	background-image: -moz-radial-gradient;
	background-image: -o-radial-gradient;
	background-image: radial-gradient;*/
}