css3渐变有几种方法

发布时间:2025-12-10 12:58:59 浏览次数:4

CSS3渐变可以让我们在设计网页时更加灵活。渐变的形式有多种,下面我们来介绍一下其中几种常见的方法。

1. 线性渐变

background: linear-gradient(to bottom, #fff, #000);

上面的代码表示的是从白色到黑色的线性渐变,方向是从上到下。

2. 径向渐变

background: radial-gradient(circle, #000, #fff);

上面的代码表示的是一个圆形的径向渐变,中心点颜色为黑色,渐变到外围是白色。

3. 重复渐变

background: repeating-linear-gradient(to right, #000, #fff 30px, #000 60px);

上面的代码表示的是一个从左到右的渐变,每30像素一个黑白渐变的重复,直到背景框填满。

除了上面这三种常见的渐变方法外,还有一些其他的写法。总的来说,CSS3渐变让我们在网页设计中更加灵活,展示效果也更加出色,值得我们学习和掌握。

需要做网站?需要网络推广?欢迎咨询客户经理 13272073477