我想改变我的水平规则的厚度(<hr>)在CSS。我知道它可以在HTML中这样做
<hr size="10">
但我听说这是不赞成的，在MDN这里提到过。在CSS中，我尝试使用height:1px，但它不会改变厚度。我想要<hr>的线是0.5px厚。
我使用的是Ubuntu上的Firefox 3.6.11
当前回答
下面是一个没有边界或边缘的1像素黑线的解决方案
hr {background-color:black; border:none; height:1px; margin:0px;}
在谷歌Chrome测试
我想我应该加上这个，因为其他答案不包括:margin:0px;。
演示
人力资源{背景颜色:黑色;边界:没有;身高:1 px;保证金:0 px;} < span style=" font - family:宋体;"text-align:中心;" > < div风格= " background: lightblue;">↑容器↑<br> <br> <br>↓hr↓</div> . <人力资源> < div风格= " background: lightgreen;“>↑hr↑<br> <br> <br>↓容器↓</div> . < / div >
其他回答
高度属性在HTML 5中已弃用。我要做的是在hr周围创建一个边界 增加边框的厚度:hr style="border:solid 2px black;"
当我做厚的时候，我有一个问题，把颜色变成真正的黑色。 所以我把不透明度改为1，问题就解决了:
hr{
height: 5px;
background-color: black;
opacity: 1;
}
为了保持一致性，删除任何边框，并使用<hr>厚度的height。添加背景色将使<hr>具有指定的高度和颜色。
在样式表中:
hr {
border: none;
height: 1px;
/* Set the hr color */
color: #333; /* old IE */
background-color: #333; /* Modern Browsers */
}
或者是内联的:
<hr style="height:1px;border:none;color:#333;background-color:#333;" />
更详细的解释在这里
我增加了线条的不透明度，所以它看起来更薄:
<hr style="opacity: 0.25">
下面是一个没有边界或边缘的1像素黑线的解决方案
hr {background-color:black; border:none; height:1px; margin:0px;}
在谷歌Chrome测试
我想我应该加上这个，因为其他答案不包括:margin:0px;。
演示
人力资源{背景颜色:黑色;边界:没有;身高:1 px;保证金:0 px;} < span style=" font - family:宋体;"text-align:中心;" > < div风格= " background: lightblue;">↑容器↑<br> <br> <br>↓hr↓</div> . <人力资源> < div风格= " background: lightgreen;“>↑hr↑<br> <br> <br>↓容器↓</div> . < / div >
