样式化 <hr /> 元素

Posted 2023-03-21

【中文标题】样式化 <hr /> 元素

【英文标题】：Styling the <hr /> element

【发布时间】：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 已被弃用。

检查答案：***.com/a/6382036/937891 此问题可能重复。

【参考方案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