避免在不规则的CSS形状上重叠掉落阴影

Question

我在CSS中创建一个popover，它由一个常规矩形和一个顶部的小标签组成。我想在弹出框中添加一个投影，但是无法将标签底部的阴影隐藏起来。

见下面的popover图片：

...以及要生成的代码：

.popover-test {
  background-color: #fff;
  border: 1px solid #929292;
  box-shadow: 0 0 10px 1px #929292;
  height: 100px;
  position: relative;
  width: 200px;

  &::before {
    background-color: #fff;
    border: 1px solid #929292;
    border-bottom: 1px solid #fff;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    box-shadow: 0 0 10px 1px #929292;
    top: -20px;
    content: "";
    height: 20px;
    left: 100px;
    position: absolute;
    width: 50px;
  }
}

如何将阴影保持在不规则形状的边框周围，但是将其从顶部标签的底部移除？

Answer 1

将标签包裹在z-index:1;的某个位置，然后您就可以像往常一样在前后移动。你会得到一些问题，但没有什么不能用一些基本的css来清理

https://jsfiddle.net/ptb7n90w/1/

.wrapper {
    z-index:1;
}
.popover-test {
    background-color: #fff;
    border: 1px solid #929292;
    box-shadow: 0 0 10px 1px #929292;
    height: 100px;
    position: relative;
    width: 200px;
}
.popover-test::before {
    background-color: #fff;
    border-bottom: 1px solid #fff;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    top: -10px;
    content:"";
    height: 20px;
    left: 101px;
    width: 50px;
    position: absolute;
    z-index:1;
}
.popover-test::after {
    background-color: #fff;
    border: 1px solid #929292;
    border-bottom: 1px solid #fff;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    box-shadow: 0 0 10px 1px #929292;
    top: -20px;
    content:"";
    height: 20px;
    left: 100px;
    width: 50px;
    position: absolute;
    z-index:-1;
}