2

所以我正在尝试设置淡出 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/

4

1 回答 1

1

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

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

jsFiddle 示例

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

.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%);
}
于 2013-11-04T20:00:37.417 回答