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

【问题标题】：How do I remove a border from a pseudo element when the parent element has one?当父元素有边框时，如何从伪元素中删除边框？
【发布时间】：2017-06-12 20:14:58
【问题描述】：

说明：

我修改了一个在网上找到的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;
}

【问题讨论】：

你试过在伪元素中添加border: 0;吗？
这不是 on 伪元素的边框，因此尝试从伪元素中移除边框当然没有任何效果。除此之外，我不确定您在这里实际问的是什么。您想从第一个最后一个表格单元格中删除外边框吗？那么就这样做吧。或者你的意思是切入阴影的水平小白线？
嗨 Cbroe。我想保持所有现有单元格的边界。我想去掉的只是桌子两侧的小线条。我会更新我的答案以更清楚。

标签： html css

【解决方案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。

【讨论】：