我想改变我的水平规则的厚度(<hr>)在CSS。我知道它可以在HTML中这样做
<hr size="10">
但我听说这是不赞成的，在MDN这里提到过。在CSS中，我尝试使用height:1px，但它不会改变厚度。我想要<hr>的线是0.5px厚。
我使用的是Ubuntu上的Firefox 3.6.11
当前回答
还有另一种最简单的方法，只需在标签本身上使用HTML属性，只需在声明'size'属性后添加'noshade'属性。
其中'size'反映了线条的粗细和'noshade'应用背景颜色的线跨越粗细
例如:
<hr size="10" noshade/>
其他回答
我建议将HR本身设置为0px高，并使用其边界可见。我注意到，当你放大和缩小(ctrl +鼠标滚轮)时，HR本身的厚度会发生变化，而当你设置边界时，它总是保持不变:
hr {
height: 0px;
border: none;
border-top: 1px solid black;
}
下面是一个没有边界或边缘的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 >
我增加了线条的不透明度，所以它看起来更薄:
<hr style="opacity: 0.25">
我正在寻找最短的方法来画一条1px的线，因为分离的CSS的整个负载不是最快或最短的解决方案。
直到HTML5, WAS是1px hr的一种更短的方式:<hr noshade> 但. .<hr>的noshade属性在HTML5中不支持。使用CSS代替。(也没有其他属性之前使用，如大小，宽度，对齐)…
现在，这是相当棘手的，但如果最简单的1px hr需要很好的工作:
变体1，黑色hr:(黑色的最佳解决方案)
<hr style="border-bottom: 0px">
输出:FF, Opera -黑色/ Safari -深灰色
变体2,GRAY hr(最短!):
<hr style="border-top: 0px">
输出:Opera -深灰色/ FF -灰色/ Safari -浅灰色 变种3，颜色按需:
<hr style="border: none; border-bottom: 1px solid red;">
输出:Opera / FF / Safari: 1px红色。
高度属性在HTML 5中已弃用。我要做的是在hr周围创建一个边界 增加边框的厚度:hr style="border:solid 2px black;"
