单个HTML元素能否设两种背景色？CSS类分色实现咨询

当然可以实现啦！直接用单一的background-color确实做不到，但我们有几个简单的技巧能轻松搞定这个需求，下面给你分享两种最实用的方案：

方法一：CSS线性渐变（最简洁） #

这是改动最小的方案，直接把原来的background-color替换成线性渐变，通过颜色断点精准控制50%的分界：

.stepwizard-row:before {
  top: 14px;
  bottom: 0;
  position: absolute;
  content: " ";
  width: 100%;
  height: 4px;
  /* 把#ff0000替换成你需要的第二种颜色即可 */
  background: linear-gradient(to right, #d6d6c2 0%, #d6d6c2 50%, #ff0000 50%, #ff0000 100%);
  z-index: 0; /* 注意：你原来的代码里写的是z-order，这是错误的，正确属性是z-index */
}

原理很简单：渐变方向是从左到右，前50%区域用你原来的#d6d6c2，后50%区域用第二种颜色，两个颜色的断点都设在50%，这样就会形成清晰的分界，不会有过渡效果。

方法二：双伪元素（更灵活） #

如果之后你需要调整分界位置、给两边加不同样式（比如圆角、阴影），可以用两个伪元素分别控制左右区域：

/* 先给父元素加相对定位，让伪元素能基于它定位 */
.stepwizard-row {
  position: relative;
}

/* 左边50%区域 */
.stepwizard-row:before {
  top: 14px;
  bottom: 0;
  position: absolute;
  content: " ";
  width: 50%;
  height: 4px;
  background-color: #d6d6c2;
  z-index: 0;
  left: 0; /* 靠左对齐 */
}

/* 右边50%区域 */
.stepwizard-row:after {
  top: 14px;
  bottom: 0;
  position: absolute;
  content: " ";
  width: 50%;
  height: 4px;
  background-color: #ff0000; /* 替换成你的第二种颜色 */
  z-index: 0;
  right: 0; /* 靠右对齐 */
}

这个方案的好处是两个区域完全独立，后续调整样式会更方便。

内容的提问来源于stack exchange，提问作者sadeee nadeee