CSS3（4）渐变

CSS3 渐变（Gradients）

CSS3 定义了两种类型的渐变（gradients）：

• 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
• 径向渐变（Radial Gradients）- 由它们的中心定义

 

CSS3 线性渐变

为了创建一个线性渐变，你必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以设置一个起点和一个方向（或一个角度）。

语法

background-image: linear-gradient(direction, color1,color2,...);

从上到下（默认）

style="width: 300px; height: 200px; background-image: linear-gradient(red,yellow);"

 

从左到右

style="width: 300px; height: 200px; background-image: linear-gradient(to right,blue,yellow);"

 

 对角

style="width: 300px; height: 200px; background-image: linear-gradient(to right bottom,green,purple);"

 

 自定义角度

style="width: 300px; height: 200px; background-image: linear-gradient(90deg,green,purple);"

 

 参考角度（有的浏览器可能不同）

 

 使用多个颜色结点

 

style="width: 200px; height: 100px; background-image: linear-gradient(red,yellow,green);"

还可以控制各种颜色占比：

style="width: 200px; height: 100px; background-image: linear-gradient(red 10%,yellow 20%,green 70%);"

使用透明度（transparent）

CSS3 渐变也支持透明度（transparent），可用于创建减弱变淡的效果。

rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。

 

 代码：

style="width:200px;height:100px;background-image:linear-gradient(to right,rgba(255,0,0,0),rgba(255,0,0,1));"

重复的线性渐变

repeating-linear-gradient() 函数用于重复线性渐变：

 

 代码：

style="width: 200px; height: 100px; background-image: repeating-linear-gradient(red,yellow 10%,green 20%);"

CSS3 径向渐变

径向渐变由它的中心定义。

 

 代码：

style="width: 200px; height: 150px; background-image: radial-gradient(circle,red,yellow,green);"

注：circle可以不写，默认为ellipse，根据盒模型比例渐变，如下

 

 也可以用百分比设置各种颜色所占比例

重复的径向渐变

repeating-radial-gradient() 函数用于重复径向渐变：

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