如何为border-bottom添加多种颜色？实现三色底部边框效果

方法一：线性渐变背景模拟边框 #

利用线性渐变背景来模拟三色底部边框，通过百分比划分颜色区域，灵活控制尺寸和位置：

.triple-border-bottom {
  padding-bottom: 8px; /* 避免文字与边框重叠 */
  background-image: linear-gradient(to right, #ff0000 33.33%, #00ff00 33.33%, #00ff00 66.66%, #0000ff 66.66%);
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: 100% 3px; /* 第二个值控制边框厚度 */
}

• 说明：通过渐变的百分比断点，将底部区域三等分，分别设置对应颜色；background-size的高度值可根据需求调整边框粗细。

方法二：伪元素+Flex布局实现 #

借助伪元素创建三个独立的色块，用Flex布局平分宽度：

.triple-border-bottom {
  position: relative;
  padding-bottom: 8px;
}

.triple-border-bottom:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  display: flex;
}

.triple-border-bottom:after:before,
.triple-border-bottom:after span,
.triple-border-bottom:after:after {
  content: '';
  flex: 1;
}

.triple-border-bottom:after:before {
  background-color: #ff0000;
}
.triple-border-bottom:after span {
  background-color: #00ff00;
}
.triple-border-bottom:after:after {
  background-color: #0000ff;
}

• 说明：父元素设相对定位，伪元素通过Flex让三个子元素自动平分宽度，分别赋予不同颜色实现效果。

方法三：多背景层拆分控制 #

将三个颜色拆分为独立背景层，分别定位到底部的左、中、右区域：

.triple-border-bottom {
  padding-bottom: 8px;
  background-image: 
    linear-gradient(#ff0000, #ff0000),
    linear-gradient(#00ff00, #00ff00),
    linear-gradient(#0000ff, #0000ff);
  background-repeat: no-repeat;
  background-position: left bottom, center bottom, right bottom;
  background-size: 33.33% 3px;
}

• 说明：每个背景层对应一个颜色，通过background-position和background-size精准控制每个色块的位置和宽度。

内容的提问来源于stack exchange，提问作者Michael Horvilleur