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

CSS3 定義了兩種類型的漸變(gradients)：

線性漸變(Linear Gradients)- 向下/向上/向左/向右/對角方向

徑向漸變(Radial Gradients)- 由它們的中心定義

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

}

總結

以上是生活随笔為你收集整理的oracle数据库渐变色,CSS3背景颜色渐变（gradients），适用于微信小程序的全部內容，希望文章能夠幫你解決所遇到的問題。

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