oracle数据库渐变色,CSS3背景颜色渐变（gradients），适用于微信小程序

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

}