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

posted @ 2020-04-10 20:22  盗哥泡茶去了  阅读(147)  评论(0编辑  收藏  举报