CSS框阴影与伪元素冲突 [英] CSS box shadow conflicting with pseudo-element

问题描述

有一种方法可以禁用伪元素箭头所在部分的框阴影。

Is there a way to disable the box shadow for the part where the pseudo-element arrow resides?

当前：

>

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

or without the negative z-index on the pseudo-element:

希望的结果：

>

#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>

推荐答案

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

You can't control which parts of a box shadow or a drop shadow filter are rendered, at least not directly.

根据你的布局，你可以通过修补另一个伪元素，你有一个。我使用 :: before 之间交换 :: after 以避免需要 z- index 因为具有相同堆栈级别的框从后面到前面堆叠（意味着 :: 后面的堆栈

Depending on your layout, you could cheat by patching another pseudo-element over the one that you have. I swap the ::after with a ::before to obviate the need for z-index because boxes with the same stack level stack from back to front (meaning ::after stacks in front of ::before).

但是，如果您的元素中有任何内容，您需要定位内容，并给它 z-index：1 ，以确保它将绘制在两个伪元素框的顶部，因为 :: after 主要内容因此也会在前面堆栈的内容。请参阅 #element> p

However if you have any content in your element, you will need to position the content and give it z-index: 1 to ensure that it will paint on top of both of your pseudo-element boxes, since ::after comes after the main content and will therefore also stack in front of the content. See the #element > p rule in the following example.

#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框阴影与伪元素冲突的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！