如何给 <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

Answer 1

好的，只需为hr提供一些高度即可。

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

<hr/>

- K K

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

---

最佳答案应该被标记为 :) 非常感谢。 - A.T Rayan

Answer 3

请添加以下CSS：

#seperate {
  height: 3px;
  background: red; /* For browsers that do not support gradients */ 
  background: -webkit-linear-gradient(to right, red , yellow); /*For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(to right, red, yellow); /* For Opera 11.1 to 12.0 */ 
  background: -moz-linear-gradient(to right, red, yellow); /* For Firefox 3.6 to 15 */ 
 background: linear-gradient(to right, red , yellow); /* Standard syntax */ }
}

请查看 Fiddle 链接 https://jsfiddle.net/pqrudt6j/。

- Ali