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

提供一些高度

＆＃13;

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

＆＃13;

<hr/>

＆＃13;

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

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 */ }
}

请查看小提琴链接https://jsfiddle.net/pqrudt6j/

你如何给出<hr />渐变色？

3 个答案: