background: linear-gradient(direction, color-stop1, color-stop2, …); background: radial-gradient(shape size, starting-color, ending-color); background: repeating-linear-gradient(direction, color-stop1, color-stop2, …); background: repeating-radial-gradient(shape size, starting-color, ending-color);
线性渐变是一种沿着直线路径在两种或多种颜色之间进行平滑过渡的方法。如果您想创建一个简单的水平或垂直的线性渐变,在样式表中使用以下代码:
background: linear-gradient(to right, #f00, #00f); background: linear-gradient(to bottom, #f00, #00f);
径向渐变是一种从中心点开始向外辐射状的颜色过渡。径向渐变可以沿着圆形或椭圆形形状进行渐变。以下是一个简单的径向渐变:
background: radial-gradient(circle at center, #f00, #00f);
重复渐变是一种在指定位置重复渐变的方法。以下是一个简单的重复线性渐变:
background: repeating-linear-gradient(to right, #f00, #00f);
总结来说,使用CSS3渐变效果可以使您的网页设计更加具有吸引力和专业性。以上是一些常用的渐变属性和代码示例,您可以根据需要进行修改和添加。