html - CSS 防止盒子阴影颜色渗色

Question

我正在尝试使用延伸到彼此路径中的框阴影为两个相邻的 DIV 着色。由于某种原因，其中一个元素的框阴影会溢出到另一个 div 的顶部，从而产生丑陋的效果。

这是当前效果:https://imgur.com/Gs3hT5P但我试图让它看起来像这样:https://imgur.com/eBQLGCv

我所拥有的代码如下，请记住预期的结果不是用 HTML/CSS 编码的，所以也许我试图完成的事情用 CSS 是不可能的。

span {
  position: relative;
  display: inline-block;
  background: #fff;
  width: 40px;
  height: 20px;
  margin-right: 7px;
  border-radius: 1px;
}

span:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
}

span.red {
  box-shadow: 0px 0px 30px 10px #ff0000;
}

span.blue {
  box-shadow: 0px 0px 30px 10px #00ccff;
}

<span class="red"></span>
<span class="blue"></span>

Answer 1

一个解决方案是将阴影设置为 before 伪元素:

span.red::before {
    box-shadow: 0px 0px 30px 10px #ff0000;
}

span.blue::before {
    box-shadow: 0px 0px 30px 10px #00ccff;
}

因为您将它们的 z-index 设置为 -1，所以这些伪元素将位于它们的父元素之后，即 span 元素。

---

更新:您修复了 HTML，因此出于信息目的，我保留了我在下面写的内容。

另外不要忘记以这种方式关闭您的 span 元素(有关更多详细信息，请参阅 HTML5 standard):

<span class="red"></span>
<span class="blue"></span>