H5 css3漸變

---恢復內容開始---

1. 漸變 gradients

水平漸變 linear gradients

語法  background:linear-gradient(direction，color1，color2，……)

Direction

1. 這個參數可以省略 如果省略了默認方向是從上到下
2. 這個參數如果不省略 寫方向的起始值 top(從上到下) left(從左到右) right(從右到左)
3. 如果這個參數不省略 這個屬性前面需要加前綴或者是 to 終點方向

 

1. 對角漸變

 

1. 角度 deg  0代表從下到上 90deg代表從左到右，

 

1. 漸變的過程

 

0% 在0%處 是純紅色  20%是純藍色  如果最后一個值不是100% 代表從這個值到100%都是純orange，如果最后一個值是100% 在100%處是純橙色。

在起點如果不是0 是10% 從0到10%處都是純紅色

徑向漸變radial gradients

起點是中心點，向四周漸變

Background:radial-gradient(shape,color,color)

 

1. Shape

參數可以省略 如果省略默認是ellipse橢圓形 還有個值是circle 代表圓

1. 漸變過程

0% 在0%處 是純紅色  20%是純藍色  如果最后一個值不是100% 代表從這個值到100%都是純orange，如果最后一個值是100% 在100%處是純橙色。

在起點如果不是0 是10% 從0到10%處都是純紅色