如何修复WordPress网站字体阴影与描边显示异常问题

问题根源 #

你当前的CSS组合（-webkit-text-stroke、text-shadow + 白色文字）触发了浏览器渲染层级冲突：描边和阴影的渲染顺序导致阴影被文字或描边遮挡，只有文本被选中时，浏览器的选中样式强制改变了渲染层级，才会呈现预期效果。

修复方案 #

方案1：用filter: drop-shadow()替代text-shadow #

drop-shadow滤镜会对整个文字（包括描边）统一添加阴影，从根源避免层级冲突：

.wp-block-heading-h1 {
    text-decoration: underline dotted purple;
    -webkit-text-stroke: 2px black;
    color: white;
    filter: drop-shadow(-4px 5px 0 black);
}

方案2：透明文字+伪元素填充分离层级 #

通过伪元素单独处理文字填充，让描边、阴影、填充的层级完全可控：

.wp-block-heading-h1 {
    position: relative;
    text-decoration: underline dotted purple;
    -webkit-text-stroke: 2px black;
    color: transparent;
    text-shadow: black -4px 5px;
}

.wp-block-heading-h1::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    color: white;
    -webkit-text-stroke: 0;
    text-shadow: none;
}

对应的HTML需要补充data-text属性：

<h1 class="wp-block-heading-h1" data-text="S. CRAP">S. CRAP</h1>

方案3：调整text-shadow多重阴影顺序（轻量修复） #

给text-shadow添加一层文字颜色的阴影，确保填充色覆盖在最上层，阴影和描边正常显示：

.wp-block-heading-h1 {
    text-decoration: underline dotted purple;
    -webkit-text-stroke: 2px black;
    color: white;
    text-shadow: 
        -4px 5px 0 black,
        0 0 0 white;
}

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