Chrome中CSS背景图片线性渐变出现多余边框问题求助

Hey there! Let's break down why that unexpected bottom "border" is showing up and how to fix it.

First off, that extra line isn't actually a border—it's a side effect of how your multiple background gradients are rendering. Right now, you're applying the same background-size: 100% 50% to both gradients, and since your <span> is an inline element, its background extends to cover the full line-height of the element (not just the text itself). That extra space from line-height makes the gradient look like an unwanted bottom border.

Here are two straightforward fixes tailored to your use case:

1. Target Each Gradient Separately #

Since you're using two background layers, you can specify unique sizes and positions for each one using comma-separated values. This lets you control the green underline's height precisely, so it doesn't bleed into extra space:

.fancy-underline {
  text-decoration: none;
  background-image: 
    linear-gradient(rgba(255,255,255,.7), rgba(255,255,255,.7)),
    linear-gradient(#91c678, #91c678);
  /* Assign positions for each gradient layer */
  background-position: 0 100%, 0 100%;
  background-repeat: no-repeat;
  /* Set distinct sizes: white overlay covers 50% of text height, green line is a thin strip */
  background-size: 100% 50%, 100% 3px;
  /* Optional: Adjust line-height to align gradients perfectly with text */
  line-height: 1.3;
}

2. Restrict Background to the Text Content #

If you want the background to only cover the text's content (not the full line-height space), add background-origin: content-box and tweak the element's display to fit tightly around the text:

.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 100%;
  background-repeat: no-repeat;
  background-size: 100% 50%;
  /* Restrict background to the text's content area only */
  background-origin: content-box;
  /* Make the span fit tightly around the text */
  display: inline-block;
  line-height: 1.1;
}

The core issue was that inline elements' backgrounds inherit the full line-height space. By either controlling each gradient's size or restricting the background area, you'll eliminate that "extra border" look entirely.

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