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

Question

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

.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%;
}

<p><span class="fancy-underline">here is some fancy underline</span></p>

我在调试器中的计算样式下看不到任何可能导致此问题的内容，因此我认为这一定是我的线性渐变的问题。谁能指出我正确的方向？

Answer 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%;
}

<p><span class="fancy-underline">here is some fancy underline</span></p>

了解其工作原理的相关问题：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>

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

CSS Background Image Linear Gradient showing unwanted border in Chrome

css

linear-gradients