你如何给 <hr> 一个渐变色？

Question

我的 html 页面上有一条水平线，应用了以下样式：

 #seperate {
    clear: both;
    border: 3px solid red;
}

是否可以使水平线的颜色渐变类似于：

 background: linear-gradient(to right, red , yellow)

我试过这样做..

 #seperate {
clear: both;
border: 3px solid linear-gradient(to right, red , yellow);
}

..但那失败了。

原文由 user8871181 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

是的，只需为 hr 提供一些高度

 hr {
  background: linear-gradient(to right, red, yellow);
  height: 5px;
}

 <hr/>

原文由 K K 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

这是你的梯度

 body{
  padding:20px;
}

.hr1 {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}

 <hr class="hr1" />

原文由 Shahil M 发布，翻译遵循 CC BY-SA 4.0 许可协议