如何为Box Shadow添加线性渐变？现有方案失效求助

原生box-shadow属性不支持渐变效果，所以你当前的代码只能显示纯色阴影。要实现渐变阴影，可以通过伪元素+背景渐变+模糊滤镜的方式模拟，具体代码如下：

.underimgborder {
  position: relative;
  /* 保留你原有的边框设置，不需要可删除 */
  border: 0px solid #00ff89;
  border-image: linear-gradient(to right, rgba(47, 47, 47, 0.048), rgb(0, 255, 136), rgba(47, 47, 47, 0.085)) 1;
  /* 确保容器层级高于伪元素，避免内容被遮挡 */
  z-index: 1;
}

.underimgborder::before {
  content: "";
  position: absolute;
  top: -40px; /* 调整位置到图片边缘处，对应原阴影的垂直偏移 */
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 40px; /* 阴影的高度，对应原阴影的扩散范围 */
  background: linear-gradient(to right, rgba(47, 47, 47, 0.048), rgb(0, 255, 136), rgba(47, 47, 47, 0.085));
  filter: blur(20px); /* 模糊程度，模拟阴影的虚化效果 */
  z-index: -1; /* 将伪元素放在容器下方，不遮挡内容 */
}

<div class="underimgborder"></div>

关键说明 #

• 用::before伪元素创建独立图层，通过渐变背景+模糊滤镜模拟渐变阴影的视觉效果。
• 调整top、height、blur()的参数，可以适配你需要的阴影范围和虚化程度，精准遮盖图片边缘线条。

内容的提问来源于stack exchange，提问作者Terran Stone