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 堆叠在 [= 前面13=]).

但是，如果您的元素中有任何内容，您将需要定位内容并给它 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>

CSS 框阴影与伪元素冲突

CSS box shadow conflicting with pseudo-element

css

pseudo-element

css-filters