CSS 框阴影与伪元素冲突

Question

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

当前:

或者在伪元素上没有负 z-index:

期望的结果:

#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); 
}

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

Answer 1

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

根据您的布局，您可以通过在已有的伪元素上修补另一个伪元素来作弊。我将 ::after 替换为 ::before 以避免对 z-index 的需要，因为具有相同堆栈级别的框从后面堆叠到前面(意思是 ::after 堆栈在 ::before 之前)。

但是，如果您的元素中有任何内容，您将需要定位内容并为其指定 z-index: 1 以确保它将绘制在您的两个伪元素之上框，因为 ::after 出现在主要内容之后，因此也会堆叠在内容之前。请参阅以下示例中的 #element > p 规则。

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

#element::before, #element::after {
    content: "";
    background-color: inherit;
    position: absolute;
}

#element::before {
    width: 25px;
    height: 25px;
    top: 40px;
    left: 88px;
    transform: rotate(45deg);
    -webkit-filter: drop-shadow(5px 5px 5px #222);
    filter: drop-shadow(5px 5px 5px #222); 
}

#element::after {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

#element > p {
    position: relative;
    z-index: 1;
}

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