在网页开发中，横线样式是非常常见的元素，比如内容分隔线、标题装饰线、进度条底色等，通过CSS代码可以实现各种样式效果的横线，不需要依赖额外的图片资源。
使用border-bottom实现基础横线
这是最基础的横线实现方式，适合给元素添加底部横线，比如给标题添加下划线效果。我们可以通过border-bottom属性控制横线的宽度、样式和颜色。
/* 给h2标题添加2px粗的实线黑色横线 */
h2 {
border-bottom: 2px solid #333;
padding-bottom: 8px; /* 横线与文字的间距 */
}
/* 虚线横线样式 */
.dashed-line {
border-bottom: 1px dashed #999;
width: 200px;
}
使用伪元素实现独立横线
如果不需要给现有元素添加横线，而是单独插入一条横线，可以使用::before或者::after伪元素，这种方式不会增加多余的HTML标签，更符合语义化要求。
/* 在元素前面添加一条横线 */
.line-before::before {
content: "";
display: block;
width: 100%;
height: 1px;
background-color: #eee;
margin-bottom: 16px;
}
/* 标题两侧带横线的效果 */
.title-with-line {
display: flex;
align-items: center;
gap: 16px;
}
.title-with-line::before,
.title-with-line::after {
content: "";
flex: 1;
height: 1px;
background-color: #666;
}
使用背景渐变实现特殊样式横线
如果需要实现渐变颜色、带阴影或者特殊纹理的横线，可以使用linear-gradient背景渐变属性，这种方式可以做出更丰富的视觉效果。
/* 渐变颜色横线 */
.gradient-line {
width: 300px;
height: 3px;
background: linear-gradient(to right, #ff6b6b, #4ecdc4);
}
/* 带阴影的横线 */
.shadow-line {
width: 100%;
height: 2px;
background-color: #ddd;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
不同实现方式的适用场景对比
我们可以根据实际需求选择合适的横线实现方式，以下是几种方式的对比：
| 实现方式 | 适用场景 | 优势 |
|---|---|---|
| border-bottom | 给已有元素添加底部横线 | 代码简单，兼容性好 |
| 伪元素 | 需要独立横线、装饰性横线 | 不增加额外HTML标签，灵活度高 |
| 背景渐变 | 特殊颜色、纹理横线 | 可实现复杂视觉效果 |
注意事项
- 使用伪元素实现横线时，必须设置
content属性，否则伪元素不会生效。 - 横线的宽度可以通过
width属性控制，如果是全屏横线可以设置width: 100%。 - 如果需要横线居中，可以给横线元素设置
margin: 0 auto属性。
CSS横线样式伪元素边框border-bottom修改时间：2026-06-30 11:48:27