样式化 <hr /> 元素答案

【问题标题】：Styling the <hr /> element样式化 <hr /> 元素
【发布时间】：2011-06-21 23:11:25
【问题描述】：

我正在尝试将我的 <hr /> (hr) 元素设为粉红色，并为此使用以下 css 规则：

hr {height: 1px; color: #ed1d61;background-color: #ed1d61;
}

但还是有一条黑线穿过它。

（在我正在制作的网站上查看它：http://www.yemon.org/，它是设计中唯一的水平线。

我如何获得线条均匀的粉红色？

【问题讨论】：

hr 最好听 border 属性。
我认为当 geocities 关闭商店时 hr 已被弃用。
检查答案：stackoverflow.com/a/6382036/937891 此问题可能重复。

标签： css

【解决方案1】：

改成这样：

hr {
    height: 1px;
    color: #ed1d61;
    background: #ed1d61;
    font-size: 0;
    border: 0;
}

【讨论】：

【解决方案2】：

看看你的页面，我认为这看起来最好：

hr {height: 2px;
    background-color: #ed1d61;
    border:none
}

演示是here。

【讨论】：

【解决方案3】：

尝试设置边框颜色属性：border-color:#ed1d61;

【讨论】：

【解决方案4】：

hr 元素由边框组成，所以一个简单的边框：无，你会摆脱多余的。

然后你只需要在你的身高上玩耍，让它变得像你想要的那样厚。

【讨论】：

【解决方案5】：

试试这个：

.hr {
    border: 0;
    height: 1px;
    background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.15), rgba(0,0,0,0)); 
    background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.15), rgba(0,0,0,0)); 
    background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.15), rgba(0,0,0,0)); 
    background-image:      -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.15), rgba(0,0,0,0)); 
    margin: 25px;
}

【讨论】：

【解决方案6】：

hr{
    background-color: #ed1d61;
    border-width: 0;
    /*change your size in this place*/
    padding-top: 1px;
}

<hr/>
sadf

【讨论】：