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. }