我如何改变我的<hr>标签的厚度

我想改变我的水平规则的厚度(<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 style="opacity: 0.25">

高度属性在HTML 5中已弃用。我要做的是在hr周围创建一个边界增加边框的厚度:hr style="border:solid 2px black;"

为了保持一致性，删除任何边框，并使用<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本身设置为0px高，并使用其边界可见。我注意到，当你放大和缩小(ctrl +鼠标滚轮)时，HR本身的厚度会发生变化，而当你设置边界时，它总是保持不变:

hr {
    height: 0px;
    border: none;
    border-top: 1px solid black;
}

还有另一种最简单的方法，只需在标签本身上使用HTML属性，只需在声明'size'属性后添加'noshade'属性。

其中'size'反映了线条的粗细和'noshade'应用背景颜色的线跨越粗细

例如:

<hr size="10" noshade/>

推荐文章