组合box-shadow与border-radius时出现CSS边缘故障问题求助

问题详情 #

我用HTML和CSS制作了一个切换按钮，代码片段单独运行正常，但部署到WordPress页面后，在Chrome、Firefox和Safari浏览器中，同时使用box-shadow和border-radius属性时，按钮边缘出现渲染故障（边缘有断裂/瑕疵）。我尝试过调整页面渲染、抗锯齿设置，在多款浏览器测试后仍未解决。

相关代码 #

HTML #

<div id="bifaSomethingSomething">GO LOW<br>CARBON
   <section id="model-4">
      <div class="card">
         <div class="toggle">
            <input type="checkbox" id="check-4">
            <label for="check-4"></label>
         </div>
      </div>
   </section>
</div>

CSS #

#model-4 .toggle {
    position: relative;
    box-sizing: border-box;
}
#model-4 .toggle input[type=checkbox] {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    cursor: pointer;
    opacity: 0;
}
#model-4 .toggle input[type=checkbox]:checked + label:before {
    box-shadow: inset 20px 0 0 #47B844;
    border: 2px solid #47B844;
}
#model-4 .toggle label {
    position: relative;
    display: flex;
    align-items: center;
}
#model-4 .toggle label:before {
    content: "";
    width: 40px;
    height: 20px;
    background: transparent;
    border: 2px solid #EDF8EC;
    box-shadow: inset -20px 0 0 #EDF8EC;
    position: relative;
    display: inline-block;
    transition: 0.25s ease-in-out;
    border-radius: 20px;
}
.sticky #model-4 .toggle label:before {
    background: #292B2C;
}

#bifaSomethingSomething {
    display: flex;
    color: #FFF;
    text-align: right;
    font-size: 12px;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    align-items: center;
}
#bifaSomethingSomething > section {
    margin: 0 0 0 8px;
}

解决方案 #

这类故障多是浏览器对border-radius与inset box-shadow组合渲染的精度问题，再加上WordPress主题全局样式的干扰导致的，以下是几种可行修复方式：

1. 用背景色过渡替代inset阴影 #

放弃用inset阴影模拟背景切换，直接通过background-color实现过渡，渲染更稳定：

#model-4 .toggle label:before {
    content: "";
    width: 40px;
    height: 20px;
    background: #EDF8EC;
    border: 2px solid #EDF8EC;
    position: relative;
    display: inline-block;
    transition: 0.25s ease-in-out;
    border-radius: 20px;
}
#model-4 .toggle input[type=checkbox]:checked + label:before {
    background-color: #47B844;
    border-color: #47B844;
}
.sticky #model-4 .toggle label:before {
    background-color: #292B2C;
    border-color: #EDF8EC;
}

2. 触发硬件加速优化渲染 #

给按钮元素添加微小的transform属性，强制浏览器使用GPU渲染，避免边缘瑕疵：

#model-4 .toggle label:before {
    /* 保留原有属性，新增以下一行 */
    transform: translateZ(0);
}

3. 微调border-radius值 #

将border-radius从20px改为calc(100% - 2px)或18px，避免浏览器渲染时的尺寸精度冲突：

#model-4 .toggle label:before {
    border-radius: calc(100% - 2px);
}

4. 排查WordPress主题全局样式 #

检查主题是否给父元素添加了filter、transform等可能干扰渲染的属性，或全局box-sizing重置冲突，必要时给切换按钮元素强制设置：

#model-4 .toggle label:before {
    box-sizing: border-box !important;
}

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