目录
CSS 定义了两种渐变类型:
格式:
如何使用:
编辑使用透明度:
CSS 定义了两种渐变类型:
- 线性渐变(向下/向上/向左/向右/对角线);
- 径向渐变(有中心向周围展开);
格式:
background-image: linear-gradient( 方向/角度 , 颜色1,颜色2,颜色3....);
如何使用:
通过属性 linear-gradient来这样定义一个线性渐变。
案例二:(水平)从左开始的线性渐变。它从红色开始,过渡到黄色:
background: linear-gradient(to right,#333399,#ff00cc);
案例二: (对角)从左上角开始(到右下角)的线性渐变。它从红色开始,过渡到黄色:
background-image: linear-gradient(to bottom right, red, yellow)
使用透明度:
CSS 渐变还支持透明度,也可用于创建渐变效果。
如需添加透明度,我们使用 rgba() 函数来定义色标。 rgba() 函数中的最后一个参数可以是 0 到 1 的值,它定义颜色的透明度:0 表示全透明,1 表示全彩色(无透明)。
案例三:从左开始的线性渐变。它开始完全透明,然后过渡为全色红色:
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
其他方向和角度:
- to top : 从下向上填充渐变色
- to right:从左向右填充渐变色
- to bottom:从上向下填充渐变
- to left :从右向左填充渐变色
- 0deg : 0度->to top
- 90deg: 90度->to right
- 180deg:180度->to bottom
- 270deg:270度->to left