如何制作底部边框渐变？

Question

示例：

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

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

Answer 1

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

＆＃13;

＆＃13;

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

＆＃13;

<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" />

＆＃13;

＆＃13;

＆＃13;

请注意

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