Question

所以我试图设置fadeout css3 hr标签，它适用于JSFiddle，但我无法在我的网站上解决它。

我在网站上的CSS课程：

.about-sidebar{
    margin: 25px 0;
    height: 1px;
    background: black;
    background: -webkit-gradient(linear, 0 0, 100% 0, from(#1F1F1F), to(#FFD700), color-stop(50%, black));
}

HTML：

<hr class="about-sidebar" />

我已经尝试将该课程从HR标签中取出并用div包围但是没有解决。

网站：http://travisingram.net/这是侧边栏上的“欢迎使用我的博客”。

Jsfiddle工作： http://jsfiddle.net/ZTz7Q/1633/

Answer 1

它无法在您的网站上运行的原因是因为<hr>不包含具有渐变样式的类。目前，您只需将<hr>更改为<hr class="line">或您正在使用的任何课程。

除此之外，线性渐变需要一些调整和跨浏览器前缀供应商以获得更多支持。

jsFiddle example

我不知道你想要什么颜色..但这里是黑色到透明。

.line {
    margin: 25px 0;
    height: 5px;
    background: black;
    background: -moz-linear-gradient(left, rgba(0,0,0,1) 0%, rgba(0,0,0,0.98) 2%, rgba(255,255,255,0) 90%);
    background: -webkit-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(0,0,0,0.98) 2%,rgba(255,255,255,0) 90%);
    background: linear-gradient(to right, rgba(0,0,0,1) 0%,rgba(0,0,0,0.98) 2%,rgba(255,255,255,0) 90%);
}

CSS淡出HR Line问题

1 个答案: