CSS3背景顏色漸變（gradients），適用於微信小程序wxss

CSS3 漸變（gradients）可以在兩個或多個指定的顏色之間顯示平穩的過渡。

CSS3 定義了兩種類型的漸變（gradients）：

• 線性漸變（Linear Gradients）- 向下/向上/向左/向右/對角方向
• 徑向漸變（Radial Gradients）- 由它們的中心定義

目錄

 1、線性漸變：從上到下（默認情況下）

2、 線性漸變： 從左到右

3、線性漸變： 對角

4、線性漸變：帶有指定的角度 

 5、線性漸變 ：從上到下，帶有多個顏色結點

6、 線性漸變： 帶有彩虹顏色

7、 線性漸變：帶有透明度

8、 重複線性漸變 ：repeating-linear-gradient()函數

9、 徑向漸變：顏色結點均勻分佈（默認情況下）

10、徑向漸變： 顏色結點不均勻分佈

11、重複徑向漸變 ：repeating-radial-gradient()函數

---

 1、線性漸變：從上到下（默認情況下）

.container {
  width: 100%;
  height: 500px;
  background: linear-gradient(red, orange); 
} 

 

2、 線性漸變： 從左到右

.container {
  width: 100%;
  height: 500px;
  background: linear-gradient(to right, red, orange); 
} 

3、線性漸變： 對角

.container {
  width: 100%;
  height: 500px;
  background: linear-gradient(to bottom right, red, orange);
} 

4、線性漸變：帶有指定的角度 

.container {
  width: 100%;
  height: 500px;
  background: linear-gradient(60deg, red, orange); 
} 

 5、線性漸變 ：從上到下，帶有多個顏色結點

.container {
  width: 100%;
  height: 500px;
  background: linear-gradient(red, orange, yellow); 
} 

 

6、 線性漸變： 帶有彩虹顏色

.container {
  width: 100%;
  height: 500px;
  background: linear-gradient(red, orange, yellow, green, blue, indigo, violet);
} 

7、 線性漸變：帶有透明度

.container {
  width: 100%;
  height: 500px;
  background: linear-gradient(rgba(255,0,0,1), rgba(255,0,0,0)); 
} 

8、 重複線性漸變 ：repeating-linear-gradient()函數

.container {
  width: 100%;
  height: 500px;
  background: repeating-linear-gradient(red, orange, yellow 10%); 
} 

9、徑向漸變：顏色結點均勻分佈（默認情況下）

.container {
  width: 100%;
  height: 500px;
  background: radial-gradient(red, orange, yellow);
} 

10、 徑向漸變： 顏色結點不均勻分佈

.container {
  width: 100%;
  height: 500px;
  background: radial-gradient(red 5%, orange 20%, yellow 80%);
} 

11、重複徑向漸變 ：repeating-radial-gradient()函數

.container {
  width: 100%;
  height: 500px;
  background: repeating-radial-gradient(red, orange, yellow 10%);
}