目录
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));
其他方向和角度: