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

【问题标题】：CSS Background Image Linear Gradient showing unwanted border in ChromeCSS 背景图像线性渐变在 Chrome 中显示不需要的边框
【发布时间】：2020-03-09 09:37:28
【问题描述】：

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

.fancy-underline {
    text-decoration: none;
    background-image: -webkit-gradient(linear,left top, left bottom,from(rgba(255,255,255,.7)),to(rgba(255,255,255,.7))),-webkit-gradient(linear,left top, left bottom,from(#91c678),to(#91c678));
    background-image: linear-gradient(rgba(255,255,255,.7),rgba(255,255,255,.7)),linear-gradient(#91c678,#91c678);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 100% 50%;
}

&lt;p&gt;&lt;span class="fancy-underline"&gt;here is some fancy underline&lt;/span&gt;&lt;/p&gt;

我在调试器的计算样式下看不到任何可能导致这种情况的东西，所以我认为这一定是我的线性渐变的问题。谁能指出我正确的方向？

【问题讨论】：

我在 Chrome/MacOs 上看不到任何底部边框
对我来说看起来像是一个渲染错误。可悲的是只是一个 hack，但尝试 background-position: 0 101%;

标签： css linear-gradients

【解决方案1】：

您可以覆盖更多区域，如下所示。你使渐变足够大，然后移动它以露出顶部50%，你将得到与你所做的相同的结果

.fancy-underline {
    text-decoration: none;
    background-image: linear-gradient(rgba(255,255,255,.7),rgba(255,255,255,.7)),linear-gradient(#91c678,#91c678);
    background-position: 0 -50%;
    background-repeat: no-repeat;
    background-size: 100% 200%;
}

&lt;p&gt;&lt;span class="fancy-underline"&gt;here is some fancy underline&lt;/span&gt;&lt;/p&gt;

了解其工作原理的相关问题：Using percentage values with background-position on a linear-gradient

放大版以便更好地查看：

.fancy-underline {
  text-decoration: none;
  font-size:100px;
  background-image: linear-gradient(rgba(255, 255, 255, .7), rgba(255, 255, 255, .7)), linear-gradient(#91c678, #91c678);
}
.new {
  background-position: 0 -50%;
  background-size: 100% 200%;
  background-repeat:no-repeat
}

.old {
  background-position: 0 100%;
  background-size: 100% 50%;
  background-repeat:no-repeat
}

<span class="fancy-underline new">new</span>
<span class="fancy-underline old">old</span>

【讨论】：