我想改变我的水平规则的厚度(<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/>

其他回答

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

我认为样式化<hr>标签的最佳成就如下:

hr {
    color: #ddd;
    background-color: #ddd;
    height: 1px;
    border: none;
    max-width: 100%;
}

对于HTML代码,只需添加:<hr>。

为了保持一致性,删除任何边框,并使用<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;" />

更详细的解释在这里

我建议用like结构

<style>
  .hr { height:0; border-top:1px solid _anycolor_; }
  .hr hr { display:none }
</style>

<div class="hr"><hr /></div>

下面是一个没有边界或边缘的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 >