CSS背景图像线性渐变，在Chrome中显示不需要的边框

我正在使用具有线性渐变的背景图像来创建高亮文本效果，但它会导致不需要的底部边框：

。漂亮的下划线{
文字装饰：无；
背景图像：-webkit渐变（线性，左上，左下，从（rgba（255255255.7））到（rgba（255255255.7）），-webkit渐变（线性，左上，左下，从（#91c678）到（#91c678））；
背景图像：线性梯度（rgba（255255255.7），rgba（255255255.7）），线性梯度（91c678，#91c678）；
背景位置：0.100%；
背景重复：无重复；
背景大小：100%50%；
}

---

这里有一些漂亮的下划线

您可以覆盖更多区域，如下所示。你把梯度调得足够大，然后移动它，露出顶部的

50%

，你会得到和你一样的结果

。漂亮的下划线{
文字装饰：无；
背景图像：线性梯度（rgba（255255255.7），rgba（255255255.7）），线性梯度（91c678，#91c678）；
背景位置：0-50%；
背景重复：无重复；
背景大小：100%200%；
}

---

这里有一些漂亮的下划线

我在Chrome/Macoslook上看不到任何像渲染错误一样的底部边框。不幸的是，这只是一个黑客，但请尝试背景位置：0 101%；