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