柚子快報激活碼778899分享：微信小程序——CSS3漸變

http://yzkb.51969.com/

??SS3 漸變（gradients）可以在兩個或多個指定的顏色之間顯示平穩(wěn)的過渡。CSS3 定義了兩種類型的漸變（gradients）：

說明

1、線性漸變（Linear Gradients）- 向下/向上/向左/向右/對角方向； 2、徑向漸變（Radial Gradients）- 由它們的中心定義。 線性漸變 （1）從上到下漸變（默認情況） background: linear-gradient(red, blue); （2）從左到右漸變 background: linear-gradient(to right, red , blue); （3）對角方向漸變 background: linear-gradient(to bottom right, red , blue); （4）指定角度漸變 background: linear-gradient(120deg, red, blue); （5）從上到下，帶有多個顏色結(jié)點漸變 background: linear-gradient(red, green, blue); （6）帶有彩虹顏色和文本漸變 background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); （7）從左至右，帶有透明度 background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); （8）重復(fù)線性漸變 background: repeating-linear-gradient(red, yellow 10%, green 20%); 2.徑向漸變 （1）顏色結(jié)點均勻分布 background: radial-gradient(red, green, blue); （2）顏色結(jié)點不均勻分布 background: radial-gradient(red 5%, green 15%, blue 60%); （3）形狀為圓形漸變 background: radial-gradient(circle, red, yellow, green); （4）重復(fù)徑向漸變 background: repeating-radial-gradient(red, yellow 10%, green 15%);

實例

11

12

13

14

15

16

17

18

19

20

21

22

23

線性漸變：從上至下

.view11 {

background: linear-gradient(red, blue);

}

線性漸變：從左至右

.view11 {

background: linear-gradient(red, blue);

}

線性漸變：對角

.view13 {

background: linear-gradient(to bottom right, red , blue);

}

線性漸變：指定角度

.view14 {

background: linear-gradient(120deg, red, blue);

}

線性漸變：從上到下，帶有多個顏色結(jié)點

.view15 {

background: linear-gradient(red, green, blue);

}

線性漸變：帶有彩虹顏色和文本

.view16 {

background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);

}

線性漸變：從左至右，帶有透明度

.view17 {

background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));

}

線性漸變：重復(fù)線性漸變

.view18 {

background: repeating-linear-gradient(red, yellow 10%, green 20%);

}

徑向漸變：顏色結(jié)點均勻分布

![.view19 {

background: radial-gradient(red, green, blue);

}](https://img-blog.csdnimg.cn/7d650c5d847c4aeea1f88312d053e68e.png)

徑向漸變：顏色結(jié)點不均勻分布

.view20 {

background: radial-gradient(red 5%, green 15%, blue 60%);

}

徑向漸變：圓形

.view21 {

background: radial-gradient(circle, red, yellow, green);

}

徑向漸變：重復(fù)徑向漸變

.view22 {

background: repeating-radial-gradient(red, yellow 10%, green 15%);

}

柚子快報激活碼778899分享：微信小程序——CSS3漸變

http://yzkb.51969.com/

相關(guān)閱讀