CSS框阴影与伪元素冲突

Question

有没有办法禁用伪元素箭头所在部分的方框阴影？

电流：

或伪元素上没有否定z-index：

期望的结果：

＆＃13;

＆＃13;

#element { 
    position: relative;
    width: 100px;
    height: 100px;
    background-color: blue;
    box-shadow: 5px 5px 5px #222;
}

#element::after {
    content: "";
    width: 25px;
    height: 25px;
    background-color: blue;
    top: 40px;
    left: 88px;
    transform: rotate(45deg);
    position: absolute;
    z-index: -1;
    -webkit-filter: drop-shadow(5px 5px 5px #222);
    filter: drop-shadow(5px 5px 5px #222); 
}

＆＃13;

<div id="element"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您无法控制渲染框阴影或投影滤镜的哪些部分，至少不能直接渲染。

根据你的布局，你可以通过在你拥有的那个上修补另一个伪元素来作弊。我将::after与::before交换，以避免需要z-index，因为具有相同堆栈级别的框从后到前堆叠（意味着::after堆栈在{{1}前面1}}）。

但是，如果你的元素中有任何内容，你需要定位内容并给它::before以确保它将在两个伪元素框之上绘制，因为{{1}在主要内容之后，因此也会在内容前面堆叠。请参阅以下示例中的z-index: 1规则。

::after

#element > p