Question

http://jsfiddle.net/ZMfBv/

hr {
border: 0;
border-color:blue;
background-color:blue;
color:blue;
height: 4px;
background:#fff;
background: -webkit-gradient(linear, left top, right top, color-stop(0%,hsla(0,0%,0%,0)), color-stop(50%,hsla(0,0%,0%,.75)), color-stop(100%,hsla(0,0%,0%,0)));
background: -webkit-linear-gradient(left, hsla(0,0%,0%,.75) 10%, hsla(0,0%,0%,0) 100%);
background:    -moz-linear-gradient(left,  hsla(0,0%,0%,.75) 10%, hsla(0,0%,0%,0) 100%);
background:     -ms-linear-gradient(left,  hsla(0,0%,0%,.75) 10%, hsla(0,0%,0%,0) 100%);
background:      -o-linear-gradient(left,  hsla(0,0%,0%,.75) 10%, hsla(0,0%,0%,0) 100%);
background:         linear-gradient(left,  hsla(0,0%,0%,.75) 10%, hsla(0,0%,0%,0) 100%);
}

我希望将hr的颜色更改为蓝色。很明显，颜色，背景颜色设置不起作用，我该怎么做？

Answer 1

更新：这是一个黑色背景，白色到灰色渐变hr

body {background-color: black;}


hr {
    height: 4px;
    border: 0;
    background: -webkit-linear-gradient(left, #f3ffff, #555555);
    background: -moz-linear-gradient(left,#f3ffff,  #555555);
    background: -o-linear-gradient(left, #f3ffff,  #555555);
    background: linear-gradient(left, #f3ffff,  #555555);
}

Answer 2

http://jsfiddle.net/ZMfBv/3

background: linear-gradient(to right, rgba(3,0,221,0.75) 10%, rgba(255,255,255,1) 100%);

使用蓝色作为颜色，而不是黑色。您可以使用它来创建css渐变。

Answer 3

我想，你想要一个纯蓝色，对吧？我在这里是最简单的解决方案。

hr {
    border: 0;
    border-color:red;
    color:red;
    height: 4px;
    background: blue;
}

http://jsfiddle.net/ZMfBv/13/

如何更改锥形hr的颜色？

3 个答案: