在网页视觉设计中，渐变背景是提升页面层次感的常用手段，而中间带有细条的渐变效果可以让背景更有分隔感，常用于卡片头部、导航栏背景等场景。这种效果不需要引入额外的图片资源，仅通过CSS的原生属性就能实现，下面介绍两种常见的实现方式。
方案一：使用linear-gradient多段渐变实现
CSS的linear-gradient函数支持定义多个颜色断点，我们可以利用这个特性，在渐变的中间位置插入一个窄的颜色区间作为细条。这种方式只需要给单个元素设置背景属性，不需要额外添加子元素，代码更简洁。
具体实现思路是：先定义渐变的起始颜色和结束颜色，然后在中间位置划分出一小段宽度，设置为细条的颜色，其余部分按正常渐变过渡。下面是完整的代码示例：
/* 容器样式 */
.gradient-box {
width: 400px;
height: 200px;
/* 线性渐变：从左到右，蓝色渐变到紫色，中间10%宽度位置插入2%宽度的白色细条 */
background: linear-gradient(
to right,
#4facfe 0%,
#4facfe 44%,
#ffffff 44%,
#ffffff 46%,
#9d50bb 46%,
#9d50bb 100%
);
}
上面的代码中，0%到44%是起始蓝色到细条左侧的渐变区间，44%到46%是白色细条的宽度（占比2%），46%到100%是细条右侧到结束紫色的渐变区间。你可以调整百分比数值来改变细条的位置和宽度，比如把44%改成49%，46%改成51%，就能让细条在中间位置显示，宽度变为2%。
方案二：使用伪元素叠加实现
如果需要更灵活地控制细条的样式，比如给细条添加阴影、调整透明度，或者细条颜色和渐变背景没有直接关联，可以使用伪元素::before或::after来单独实现细条，再叠加在渐变背景上方。
这种方式先给容器设置完整的渐变背景，再通过伪元素在中间绝对定位一个窄的矩形作为细条，细条的层级高于背景，视觉上就会形成中间带细条的渐变效果。代码如下：
/* 容器基础样式 */
.gradient-box2 {
width: 400px;
height: 200px;
position: relative;
/* 完整的左右渐变背景 */
background: linear-gradient(to right, #ff7e5f, #feb47b);
}
/* 中间细条伪元素 */
.gradient-box2::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 8px; /* 细条宽度 */
height: 100%;
background-color: rgba(255, 255, 255, 0.8); /* 半透明白色细条 */
box-shadow: 0 0 6px rgba(255, 255, 255, 0.6); /* 细条发光效果 */
}
这种方式的优势在于细条的样式完全独立控制，你可以修改伪元素的width调整细条宽度，修改left和transform调整细条位置，还能给细条添加border-radius、box-shadow等属性实现更多效果。
两种方案的适用场景
- 如果细条只是简单的纯色，不需要额外样式，优先选择
linear-gradient多段渐变方案，代码量更少，性能更好。 - 如果细条需要半透明、阴影、圆角等复杂样式，或者细条的位置、宽度需要动态修改，选择伪元素叠加方案更灵活。
注意事项
使用linear-gradient方案时，要注意颜色断点的百分比衔接，避免出现硬边缘。比如细条左侧的结束百分比要和细条开始的百分比一致，细条结束的百分比要和右侧渐变开始的百分比一致，这样才能保证细条边缘整齐，渐变过渡自然。
另外，如果要兼容旧版本浏览器，可以给linear-gradient添加浏览器前缀，比如-webkit-linear-gradient、-moz-linear-gradient，不过目前主流现代浏览器都已经支持无前缀的linear-gradient语法。
CSSlinear_gradient伪元素渐变效果细条装饰修改时间：2026-06-14 15:21:18