Question

我为5 px宽的水平线尝试了以下代码css3样式

<hr style=" border: solid 1px red;padding-top:10px; margin:25px auto 15px auto;clear:both" />

但是我得到了5px宽的红色矩形。

请使用正确的CSS3样式代码告诉我。

Answer 1

只要元素宽度合适，就可以了：

border-bottom:5px solid red;

会做的伎俩。

Answer 2

您应该使用width和height属性而不是border：

width: 5px;
height: 1px;
color: red;

http://www.sovavsiti.cz/css/hr.html

Answer 3

摆脱顶部填充，并使用上面建议的边框底部... http://jsfiddle.net/ZdLfJ/

Answer 4

我的HR线条样式的CSS;

.line_height      { height:4px;                                 }
.line_width       { width:100%;                                 } 
.line_hcenter     { margin-left: auto; margin-right: auto;      }
.line_vcenter     { margin-top: 10px; margin-bottom: 10px;      }
.line_color       { color:black;                                }
.line_bgcolor     { background-color:black;                     }   
.line_bordercolor { border-top: solid black; border-bottom: solid black; }

将这些类添加到hr标记中。

需要所有三种颜色（颜色，bgcolor，bordercolor）类才能获得纯色线。

浏览器交叉兼容所需的.color和.bgcolor类，否则你只需要双行。

Answer 5

在边框属性之后不要使用任何其他东西，只需在边框中制作5px而不是1像素。我是

Answer 6

只需使用“边框宽度”属性并将其设置为5px。 <hr style="border-width: 5px !important;">

CSS3：如何获得5px宽的水平线

6 个答案: