CSS3渐变有两种形式:线性渐变和径向渐变。线性渐变的语法如下:
background: linear-gradient(direction, color-stop1, color-stop2);
其中direction表示渐变的方向,可以是top,bottom,left,right,或者角度值(比如45deg);color-stop1和color-stop2表示渐变开始的颜色和结束的颜色。
例如,以下代码将创建一个从底部向上的两种颜色渐变:
background: linear-gradient(to top, #ff86a2, #ff3e7e);
径向渐变的语法如下:
background: radial-gradient(shape size at position, start-color, ..., last-color);
其中shape可以是圆形(circle)或椭圆形(ellipse),size可以是closest-side,closest-corner,farthest-side,farthest-corner,或者具体的长度值,position表示渐变的中心,start-color和last-color表示渐变开始的颜色和结束的颜色。
例如,以下代码将创建一个从圆心向外的四种颜色渐变:
background: radial-gradient(circle, #ff5f6d, #ff4596, #ff0018, #ee1c23);
总之,CSS3渐变是一个非常强大的工具,可以使你的网站变得更加生动和有趣。