怎样使用CSS代码实现网页蓝白渐变背景效果呢?
线性渐变是沿着一条直线方向改变颜色。可以使用linear-gradient()
函数来实现。
css复制body{ background:linear-gradient(tobottom,blue,white); }
在上述代码中,tobottom
表示渐变方向是从上到下,blue
是起始颜色,white
是结束颜色。也可以根据需要调整渐变方向,例如toright
(从左到右)、totopright
(从左下角到右上角)等。
径向渐变是从一个中心点向四周扩散改变颜色。使用radial-gradient()
函数实现。
css复制body{ background:radial-gradient(blue,white); }
这里的代码实现了从蓝色向白色的径向渐变,默认的渐变中心是元素的中心。可以通过指定参数来改变渐变中心位置和形状,例如:
css复制body{ background:radial-gradient(attopleft,blue,white); }
attopleft
如果需要重复的蓝白渐变效果,可以使用repeating-linear-gradient()
或repeating-radial-gradient()
函数。
css复制body{ background:repeating-linear-gradient(blue,white20px); }
上述代码实现了重复的线性渐变,每20px重复一次从蓝色到白色的渐变。