使用伪元素可通过定位叠加多层边框，如红色border-bottom上叠加蓝色线；2. box-shadow用负 offsetY 创建上下分层边框，适合轻量投影式效果；3. background-image配合linear-gradient可实现多色渐变分层底边；4. 根据需求选择方案：伪元素灵活、box-shadow轻便、背景渐变复杂但表现力强。
在CSS中实现 border-top 或 border-bottom 的颜色分层显示效果，可以通过多种方式模拟多层边框，从而让顶部或底部边框看起来像是由多个颜色层次组成的。虽然单个元素的 border 属性只能设置一种宽度和颜色，但我们可以借助伪元素、box-shadow 或多重背景来实现视觉上的“分层”效果。
1. 使用伪元素实现分层边框
通过 ::before 或 ::after 伪元素，可以为元素添加额外的“边框层”，并分别控制其颜色和位置。
例如，给一个 div 添加双色 bottom 边框：
.double-border-bottom {
position: relative;
padding-bottom: 10px;
border-bottom: 2px solid #ff0000; /* 红色底层 */
}
.double-border-bottom::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: -4px; / 在原边框下方再加一层 /
border-bottom: 1px solid #0000ff; / 蓝色上层 /
}
这样就在红色边框的上方叠加了一条蓝色细线，形成分层视觉效果。
立即学习“前端免费学习笔记（深入）”；
2. 使用 box-shadow 模拟多层边框
box-shadow 支持逗号分隔的多个阴影，可以用来模拟多层 border，特别适合 top/bottom 方向。
示例：创建具有两层颜色的 top 边框：
.layered-top-border {
padding-top: 10px;
box-shadow:
0 -2px #ff6b6b, /* 红色上边框 */
0 -5px #4ecdc4; /* 青色更宽的上边框，负值越大越靠上 */
}注意：box-shadow 不占据文档流空间，可能需要配合 padding 避免内容紧贴。
3. 结合背景线（background-image）实现复杂分层
使用 linear-gradient 创建带有颜色分段的背景，模拟多层 bottom 或 top 边框。
例如，创建一个 3 层颜色的 bottom 边框效果：
.gradient-bottom-border {
padding-bottom: 12px;
background-image: linear-gradient(
to right,
transparent, transparent,
transparent 98%,
#ccc 98%, #ccc 99%,
#999 99%, #999 100%
),
linear-gradient(
to right,
#f00 0%, #f00 97%,
#0f0 97%, #0f0 98.5%,
#00f 98.5%, #00f 100%
);
background-position: bottom, bottom;
background-size: 100% 1px, 100% 3px;
background-repeat: no-repeat;
}这里用两个渐变层分别表示不同厚度和颜色的线条，堆叠出分层效果。
4. 实际应用场景建议
根据不同需求选择合适的方法：
- 简单双层边框 → 推荐使用伪元素，控制灵活
- 需要投影式叠加 → 使用 box-shadow 更轻量
- 复杂渐变或多色条纹 → 使用 background-image + 渐变
基本上就这些方法，不复杂但容易忽略细节，比如定位偏移和层级顺序。合理利用 CSS 特性，就能轻松做出美观的分层边框效果。
