求助：将线性渐变样式的<hr>转换为底部边框

Hey David, totally get the frustration—let’s turn that gradient <hr> into an identical bottom border for your element. Here are two reliable ways to nail that exact fade-from-light-to-gray-to-light look:

Method 1: Using border-image (Clean & Direct) #

This approach uses CSS border images to map your gradient directly to the bottom border:

.your-target-element {
  /* Set a transparent base border (matches the 1px height of your original hr) */
  border-bottom: 1px solid transparent;
  /* Apply the same linear gradient as your hr */
  border-image: linear-gradient(to right, #f0f0f0, #8c8b8b, #f0f0f0) 1;
  /* Optional: Add padding-bottom if you want space between content and the border */
  /* padding-bottom: 10px; */
}

The 1 at the end of border-image is the slice value—since our gradient is 1px tall, this ensures the gradient fits perfectly into the border without distortion.

Method 2: Using Background Gradient (Great for Edge Cases) #

If you need better compatibility with older browsers or want more control over spacing, use a background gradient to simulate the border:

.your-target-element {
  /* Reserve 1px of space at the bottom for the gradient */
  padding-bottom: 1px;
  /* Apply the gradient, pin it to the bottom, set its size to match the original hr */
  background: linear-gradient(to right, #f0f0f0, #8c8b8b, #f0f0f0) bottom / 100% 1px no-repeat;
}

Here, we’re using the background shorthand to position the gradient at the bottom of the element, set its width to 100% of the element, and height to 1px (matching your original hr’s height).

Both methods will give you the exact same visual effect as your original <hr>. Just replace .your-target-element with the class or selector of the element you want to add this border to!

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