如何在CSS中为线条实现水平方向的两种不同阴影颜色？是否存在box-shadow的替代实现方案？

嘿，我来给你几个替代box-shadow实现水平双色阴影的方案，都是实际开发里常用的思路，你可以根据需求选最合适的：

方法1：伪元素（最灵活的方案） #

用::before和::after伪元素来创建独立的阴影层，完全可以自定义每个阴影的颜色、位置和大小，完美适配你要的水平方向多色效果。

示例代码：

.neon-rod {
  position: relative;
  height: 0.2vmin;
  width: 25vmin;
  background: red;
  left: 50vmin;
}

/* 左侧蓝色阴影 */
.neon-rod::before {
  content: '';
  position: absolute;
  top: 0;
  left: -0.3vmin; /* 向左偏移阴影位置 */
  height: 100%;
  width: 0.1vmin;
  background: #69e;
  box-shadow: -0.2vmin 0 0 #69e; /* 扩展阴影的横向范围 */
}

/* 右侧紫色阴影 */
.neon-rod::after {
  content: '';
  position: absolute;
  top: 0;
  right: -0.3vmin; /* 向右偏移阴影位置 */
  height: 100%;
  width: 0.1vmin;
  background: #a6e;
  box-shadow: 0.2vmin 0 0 #a6e;
}

你可以调整伪元素的left/right值来控制阴影和主线条的间距，修改width和box-shadow的偏移量来调整阴影的粗细和长度，非常灵活。

方法2：线性渐变（最简洁的方案） #

如果你的阴影是硬边效果，直接用linear-gradient把主线条和阴影整合到背景里，不需要额外元素，代码超简洁。

示例代码：

.neon-rod {
  position: relative;
  height: 0.2vmin;
  width: 25vmin;
  left: 50vmin;
  /* 用渐变绘制主色+左右阴影 */
  background: linear-gradient(90deg, #69e 0.3vmin, red 0.3vmin calc(100% - 0.3vmin), #a6e calc(100% - 0.3vmin));
  /* 给阴影留出空间，让渐变的阴影部分显示出来 */
  padding: 0 0.3vmin;
  box-sizing: border-box;
}

这个方法的核心是用渐变的颜色断点来区分主线条和阴影，再通过padding扩展容器宽度，把阴影部分包含进去，性能也很好，适合简单的硬边阴影场景。

方法3：drop-shadow滤镜（适合模糊阴影） #

如果你需要的是带有模糊效果的多色阴影，可以用filter: drop-shadow()结合伪元素复制主元素，给每个复制层添加不同颜色的阴影。

示例代码：

.neon-rod {
  position: relative;
  height: 0.2vmin;
  width: 25vmin;
  background: red;
  left: 50vmin;
}

.neon-rod::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: red;
  filter: drop-shadow(0.2vmin 0 0.1vmin #69e);
  z-index: -1; /* 把阴影放在主元素下方 */
}

.neon-rod::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: red;
  filter: drop-shadow(-0.2vmin 0 0.1vmin #a6e);
  z-index: -1;
}

这个方法的阴影会跟随元素的轮廓，适合需要模糊扩散效果的场景，不过因为要复制元素，相比前两种方法会多一点性能开销。

内容的提问来源于stack exchange，提问作者Himanshu Pal