使用 box-shadow 给文本加下划线的问题

Question

我需要在标题中的一些词下划线。我从这篇优秀的文章中获得了以下代码：https://css-tricks.com/styling-underlines-web/

我使用两个盒子阴影来创建一个 1px 的下划线。

.underline {
    box-shadow:
        inset 0 calc(-0.2em + 1px) rgb(255, 255, 255),
        inset 0 -0.2em rgb(0, 0, 0);
}



<h1>I can help you <span class="underline">create positive impact.</span></h1>

它工作正常。除了在 iPhone 上，白色嵌入框阴影的边缘周围还有亚像素灰色边框。好像白盒子没有完全覆盖黑盒子。查看屏幕截图：

我注意到 CSS Tricks 网站上提供的代码包括

.underline {
  background-size: 1px 1em;
  display: inline;
}

我也尝试过使用此附加代码，但没有任何区别。 （我认为这段代码是多余的。它什么也没做？）。

那么...如何阻止显示此灰色轮廓？

我尝试在盒子的外侧底部边缘添加阴影。 '掩盖'灰线，但没有奏效：

.underline {
    box-shadow:
        0 2px rgb(255, 255, 255),
        inset 0 calc(-0.2em + 1px) rgb(255, 255, 255),
        inset 0 -0.2em rgb(0, 0, 0);
}

Answer 1

在 iOS 中是 known bug。

对于解决方法，您可以简单地将掩码作为叠加层：

-webkit-mask-image: -webkit-radial-gradient(white, black);

    .underline {
        -webkit-mask-image: -webkit-radial-gradient(white, black);
        box-shadow:
            inset 0 calc(-0.2em + 1px) rgb(255, 255, 255),
            inset 0 -0.2em rgb(0, 0, 0);
    }