避免在不规则 CSS 形状上重叠投影

Question

我正在 CSS 中创建一个弹出窗口，它由一个常规矩形和顶部的一个小标签组成。我想给弹出窗口添加阴影，但无法隐藏选项卡底部的阴影。

请参阅下面的弹出窗口图片：

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

.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; 包裹标签，然后您可以像这样将 before/after 移动到后面和上面。您会遇到一些问题，但没有什么是无法通过一些基本的 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;
}

避免在不规则 CSS 形状上重叠投影

Avoiding Overlapping Drop Shadows on Irregular CSS Shapes

html

css

dropshadow