HTML/CSS如何实现父div模糊 内部p标签不继承blur模糊效果

父元素设置filter: blur()属性后，浏览器会将该元素及其所有内部子元素合并为一个独立的渲染合成层，模糊效果是对整个合成层做统一像素处理，子元素单独设置filter: blur(0)无法逆转父层已经完成的模糊计算，因此文字无法恢复清晰。

方案1：伪元素承载模糊（兼容性最优） #

不要将模糊滤镜直接绑定在包裹p标签的div容器上，给div设置相对定位，通过::before伪元素生成独立的模糊图层，将模糊效果仅应用在该伪元素上，p标签保持在正常文档流中即可不受模糊影响。
示例代码：

<div class="blur-wrap">
    <p>保持清晰的文本内容</p>
</div>

.blur-wrap {
    position: relative;
    width: 320px;
    height: 220px;
    padding: 24px;
}
/* 独立模糊层 */
.blur-wrap::before {
    content: "";
    position: absolute;
    inset: 0;
    /* 原本要给div设置的背景、边框等样式统一放在这里 */
    background: #f0f0f0;
    border-radius: 8px;
    /* 仅给伪元素加模糊 */
    filter: blur(5px);
    /* 将模糊层置于文字下方 */
    z-index: -1;
}
.blur-wrap p {
    /* 文本正常设置样式即可，无需额外添加filter属性 */
    font-size: 18px;
    color: #222;
    margin: 0;
}

方案2：兄弟节点分层（逻辑直观） #

如果不想使用伪元素，可以将需要模糊的区块和p标签设置为同级节点，共同放在一个定位父容器内，模糊效果仅绑定在独立的背景模糊块上，p标签放在上层即可保持清晰。
示例代码：

<div class="box-wrap">
    <div class="blur-block"></div>
    <p>保持清晰的文本内容</p>
</div>

.box-wrap {
    position: relative;
    width: 320px;
    height: 220px;
    padding: 24px;
}
.blur-block {
    position: absolute;
    inset: 0;
    background: #f0f0f0;
    border-radius: 8px;
    filter: blur(5px);
    z-index: -1;
}

注意：不要尝试通过给子元素设置更高z-index、filter: blur(0)这类方式解决问题，父元素触发filter创建独立合成层后，所有子元素都会被纳入该层的统一渲染计算，上述写法完全无法生效。

内容的提问来源于stack exchange，提问作者Sajjad