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