CSS <hr /> 元素的样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4908525/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Styling the <hr /> element
提问by Jelmar
I am trying to make my <hr />(hr) element pinkish, and am using the following css rule for this:
我试图让我的<hr />(hr) 元素变成 粉红色，并为此使用以下 css 规则：
hr {height: 1px; color: #ed1d61;background-color: #ed1d61;
}
But there is still a black line showing through it.
但是仍然有一条黑线穿过它。
(here is a look at it on the site that I am making: http://www.yemon.org/, its the only horizontal line in the design.
（这是在我正在制作的网站上查看的：http: //www.yemon.org/，它是设计中唯一的水平线。
How do i get the line uniform pink?
我如何获得统一的粉红色线条？
回答by Marwelln
Change it to this:
改成这样：
hr {
height: 1px;
color: #ed1d61;
background: #ed1d61;
font-size: 0;
border: 0;
}
回答by dogbane
回答by Brian Flanagan
Try setting the border color property: border-color:#ed1d61;
尝试设置边框颜色属性：border-color:#ed1d61;
回答by Yahel
The hr element is made of border so a simple border:none and you'll get rid of the excess.
hr 元素由 border 组成，所以是一个简单的 border:none ，你会去掉多余的。
Then you simply have to play on your height to make it as thick as you'd like.
然后你只需要调整你的高度，让它像你想要的那样厚。
回答by Ricardo Sant'Anna
Try this:
尝试这个：
.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;
}
回答by my learning
hr{
background-color: #ed1d61;
border-width: 0;
/*change your size in this place*/
padding-top: 1px;
}<hr/>
sadf