CSS3中linear-gradient属性怎么使用

CSS3中的linear-gradient属性用于创建线性渐变背景，它可以让元素背景在两个或多个指定颜色之间实现平滑过渡，不需要依赖图片就能完成渐变效果，能有效减少页面资源请求，提升加载效率。

linear-gradient基础语法

linear-gradient的标准语法结构如下，所有参数都放在linear-gradient()函数中：

/* 基础语法 */
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

其中direction是可选参数，用于指定渐变的方向，默认值为to bottom，也就是从上到下的渐变；后面的color-stop是颜色节点，至少需要两个，用来定义渐变过程中出现的颜色和对应的位置。

渐变方向设置方式

渐变方向可以通过角度或者关键词两种方式来定义，不同设置方式的适用场景有所区别。

使用关键词设置方向

关键词方向以to开头，后面跟上终点方向，可选值包括to top、to bottom、to left、to right，以及对角线方向to top left、to top right等。示例如下：

/* 从左到右渐变 */
.left-to-right {
    background-image: linear-gradient(to right, #ff0000, #00ff00);
}
/* 从左上到右下渐变 */
.top-left-to-bottom-right {
    background-image: linear-gradient(to bottom right, #000000, #ffffff);
}

使用角度设置方向

角度值的单位是deg，0deg代表从下到上的渐变，角度顺时针递增，90deg就是从左到右的渐变，和to right效果一致。示例如下：

/* 45度角渐变，从左下到右上 */
.angle-gradient {
    background-image: linear-gradient(45deg, #ff9900, #3366cc);
}

颜色节点配置

颜色节点除了指定颜色之外，还可以设置该颜色在渐变中的位置，位置可以用百分比或者长度单位表示，默认情况下颜色会均匀分布。

比如要实现红、黄、绿三种颜色各占三分之一的渐变，可以这样写：

.three-color-gradient {
    /* 红色在0%位置，黄色在50%位置，绿色在100%位置 */
    background-image: linear-gradient(to right, #ff0000 0%, #ffff00 50%, #00ff00 100%);
}

如果只给部分颜色设置位置，其余颜色会自动分配剩余空间，比如下面的代码会让红色占前30%，剩下的70%从黄色过渡到绿色：

.auto-position-gradient {
    background-image: linear-gradient(to right, #ff0000 30%, #ffff00, #00ff00);
}

重复线性渐变

如果需要实现重复的小段渐变效果，可以使用repeating-linear-gradient()函数，它的语法和linear-gradient基本一致，但是会重复填充整个背景区域。示例如下：

/* 重复条纹渐变，每个条纹宽20px */
.stripe-gradient {
    background-image: repeating-linear-gradient(
        to right,
        #ff0000 0px,
        #ff0000 20px,
        #ffffff 20px,
        #ffffff 40px
    );
}

透明渐变实现

linear-gradient也支持带透明度的颜色，常用来实现遮罩或者背景叠加效果，比如下面的代码可以实现从半透明黑色到全透明的渐变：

.transparent-gradient {
    background-image: linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0));
}

浏览器兼容性说明

目前主流现代浏览器都已经支持标准的linear-gradient属性，部分旧版本浏览器需要添加前缀，比如webkit内核的浏览器需要加-webkit-前缀，示例如下：

.compat-gradient {
    /* 兼容旧版webkit内核浏览器 */
    background-image: -webkit-linear-gradient(to right, #ff0000, #00ff00);
    /* 标准语法 */
    background-image: linear-gradient(to right, #ff0000, #00ff00);
}

实际开发中可以根据项目的浏览器兼容要求决定是否添加前缀，现在大部分项目已经不需要再适配非常旧的浏览器版本，直接使用标准语法即可。

CSS3linear-gradient渐变背景径向渐变前端样式修改时间：2026-06-04 07:19:46