如何制作底部边框渐变？

Question

示例：

您好，我需要帮助创建带有渐变和透明边缘的底部边框。

我怎样才能创造这种效果？

Answer 1

您可以为此使用伪元素，允许比边框图像更高的浏览器支持..

html,
body {
  margin: 0;
  padding: 0;
  background: #222;
}
hr {
  position: relative;
  height: 0;
  border: 0;
}
hr:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  height: 5px;
  width: 100%;
}
.demo1:before {
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%,rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
}
.demo2:before {
  background: linear-gradient(to right, rgba(179, 220, 237, 0) 0%, rgba(41, 184, 229, 1) 50%, rgba(188, 224, 238, 0) 100%);
}
.demo3:before{
  background: linear-gradient(to right, rgba(182,224,38,0) 0%,rgba(177,222,39,1) 50%,rgba(171,220,40,0) 100%); 
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<hr class="demo1" />
<br />
<hr class="demo2" />
<br />
<hr class="demo3" />

请注意

此处的前缀已通过无前缀脚本自动包含。
我使用 hr 元素仅用于演示目的。但是，此效果可用于所有支持使用伪元素的元素（即 div、a、p 等）

如何制作底部边框渐变？

how to make bottom border gradient?

html

css

gradient

border