前言

更多內容，請訪問我的 個人博客。

---

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

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

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

---

線性漸變 - 從上到下（默認情況下）

.gradual{background: linear-gradient(red, orange); } 復制代碼

---

線性漸變 - 從左到右

.gradual{background: linear-gradient(to right, red, orange); } 復制代碼

---

線性漸變 - 對角

.gradual{background: linear-gradient(to bottom right, red, orange); } 復制代碼

---

線性漸變 - 帶有指定的角度

.gradual{background: linear-gradient(60deg, red, orange); } 復制代碼

---

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

.gradual{background: linear-gradient(red, orange, yellow); } 復制代碼

---

線性漸變 - 帶有彩虹顏色

.gradual{background: linear-gradient(red, orange, yellow, green, blue, indigo, violet); } 復制代碼

---

線性漸變 - 帶有透明度

.gradual{background: linear-gradient(rgba(255,0,0,1), rgba(255,0,0,0)); } 復制代碼

---

重復線性漸變 - repeating-linear-gradient()函數

.gradual{background: repeating-linear-gradient(red, orange, yellow 10%); } 復制代碼

---

徑向漸變 - 顏色結點均勻分布（默認情況下）

.gradual{background: radial-gradient(red, orange, yellow); } 復制代碼

---

徑向漸變 - 顏色結點不均勻分布

.gradual{background: radial-gradient(red 5%, orange 20%, yellow 80%); } 復制代碼

---

重復徑向漸變 - repeating-radial-gradient()函數

.gradual{background: repeating-radial-gradient(red, orange, yellow 10%); } 復制代碼

---

轉載于:https://juejin.im/post/5c7ea25a5188251b8a53ab02

總結

以上是生活随笔為你收集整理的微信小程序中的渐变色的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。