你如何给 <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);
}

..但是那失败了。

Answer 1

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

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

<hr/>

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