当父元素有一个时，如何从伪元素中删除边框？

Question

解释

我修改了我在网上找到的CodePen，现在它看起来像这样。

https://codepen.io/anon/pen/YQqdPq

正如您在桌子最左侧看到的那样，阴影显示哪个好，但它与父母的边框相同。

我尝试将border: 0px;放入伪元素中，但这似乎没有做任何事情。

问题：

我可以从您在桌子左右两侧看到的阴影中删除边框吗？理想情况下，我喜欢边框仍然覆盖内部的阴影，但如果这太过于繁琐，那么我可以没有它。

代码摘录：

这是有问题的CSS

.shadow {
  position: relative;
} 
.shadow:before {
  box-shadow: -15px 0 15px -15px inset;
  content: " ";
  height: 100%;
  top: 0;
  left: -15px;
  position: absolute;
  width: 15px;
}
.shadow:after {
  box-shadow: 15px 0 15px -15px inset;
  content: " ";
  height: 100%;
  position: absolute;
  top: 0;
  right: -15px;
  width: 15px;
}

Answer 1

那不是边界。这是伪元素之间的1px间隙，看起来像是1px的边界。

你可以通过多种方式解决它，我这样做的方法是将伪元素的高度增加1px以弥补差距。

.shadow:before {
    height: calc(100% + 1px);
    height: -webkit-calc(100% + 1px);// (optional) for older webkit browsers
    height: -moz-calc(100% + 1px);// (optional) for older firefox browsers
}

右侧.shadow:after的内容相同。

如果您有兴趣，可以learn more about calc。