CSS3特效之渐变linear-gradient

linear-gradient

语法

 
 
<linear-gradient>：linear-gradient([ <point>,]? <color-stop>[, <color-stop>]+);
<point>：[ left | right ]? [ top | bottom ]? || <angle>?
<color-stop>：<color> [ <length> | <percentage> ]?

说明

 
 
<point>可取如下值
	left：设置左边为渐变起点的横坐标值。
	right：设置右边为渐变起点的横坐标值。
	top：设置顶部为渐变起点的纵坐标值。
	bottom：设置底部为渐变起点的纵坐标值。
<angle>：
	用角度值指定渐变的方向（或角度）。
<color-stop>：
	指定渐变的起止颜色。

从上到下

从上到下渐变

 
 
.top-bottom{ 
	background:-moz-linear-gradient(top, #e97e00, #f80200);
	background:-webkit-linear-gradient:(top, #e97e00, #f80200); 
	background:linear-gradient:(top, #e97e00, #f80200);
	float:left;
}

从左到右

从左到右渐变

 
 
.left-right{ 
	background:-moz-linear-gradient(left, #e97e00, #f80200);
	background:-webkit-linear-gradient:(left, #e97e00, #f80200); 
	background:linear-gradient:(left, #e97e00, #f80200);
}

沿45度方向渐变

从左上角至右下角

 
 
.topleft{ 
	background:-moz-linear-gradient(45deg, #e97e00, #f80200);
	background:-webkit-linear-gradient:(45deg, #e97e00, #f80200); 
	background:linear-gradient:(45deg, #e97e00, #f80200);
}