CSS3特效之渐变:linear-gradient

linear-gradient

语法

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

说明

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

从上到下

1. .top-bottom{
2. background:-moz-linear-gradient(top, #e97e00, #f80200);
3. background:-webkit-linear-gradient:(top, #e97e00, #f80200);
4. background:linear-gradient:(top, #e97e00, #f80200);
5. float:left;
6. }

从左到右

1. .left-right{
2. background:-moz-linear-gradient(left, #e97e00, #f80200);
3. background:-webkit-linear-gradient:(left, #e97e00, #f80200);
4. background:linear-gradient:(left, #e97e00, #f80200);
5. }

沿45度方向渐变

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