如何更改<hr>标签的厚度

我建议使用类似的构造

<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;}

• 在谷歌浏览器中测试

我以为我要加上这个，因为其他答案不包括：margin:0px;。

• 演示版

hr {background-color:black; border:none; height:1px; margin:0px;}

<div style="border: 1px solid black; text-align:center;">
<div style="background-color:lightblue;"> ↑ container ↑ <br> <br> <br> ↓ hr ↓ </div>
<hr>
<div style="background-color:lightgreen;"> ↑ hr ↑ <br> <br> <br> ↓ container ↓ </div>
</div>

我相信样式<hr>标签的最佳成就如下：

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

对于HTML代码，只需添加：<hr>。

为了保持一致性，请移除所有边界，并使用高度作为<hr>厚度。添加背景色将<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">

我建议将其HR自身设置为0px高，并使用其边框为可见。我注意到，当您放大和缩小（Ctrl +鼠标滚轮）时，HR其自身的厚度会发生变化，而在设置边框时，其厚度始终保持不变：

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

我一直在寻找绘制1px线的最短方法，因为单独CSS的整个负载并不是最快或最短的解决方案。

在HTML5之前，WAS是1px hr的更短方法：<hr noshade>，但是。.HTML5不支持<hr>的noshade属性。改用CSS。（以及之前使用过的其他服装，例如大小，宽度，对齐）...

现在，这一步非常棘手，但是如果需要最简单的1px hr时，它会很好地工作：

版本1，黑色小时：（黑色最佳解决方案）

<hr style="border-bottom: 0px">

输出：FF，Opera-黑色/ Safari-深灰色

变化2，灰色小时（最短！）：

<hr style="border-top: 0px">

输出：Opera-深灰色/ FF-灰色/ Safari-浅灰色

<hr style="border: none; border-bottom: 1px solid red;">

输出：Opera / FF / Safari：1px红色。

height属性已在html 5中弃用。我要做的是在hr周围创建边框，并增加边框的厚度，例如：hr style =“ border：solid 2px black;”