Question

如何在html / CSS

中设置水平规则的粗细

Answer 1

您可以使用SIZE属性：

<hr size="3" />

请注意，这已被弃用。你应该真的使用样式来解决这个问题。

hr {
    height: 3px;
}

Answer 2

如果您的文档中有很多<hr />，只需在<head>部分添加样式

hr
{
    border: 5px solid #000;
}

并将 5px 更改为您想要的任何内容。

编辑不要使用高度，它会使你的hr看起来是空心的，除非那就是你要找的东西。

这是一个简单的例子：http://jsfiddle.net/ErdXg/ 尝试一些颜色和厚度，并玩它。

Answer 3

您可以使用CSS，如下所示：

hr {
    height: 20px;
}

Answer 4

对于HR属性的其他示例，请转到here

Answer 5

<hr height="3" style="color:purple;background-color:purple;"></hr>

多数民众赞成它只是改变它的背景颜色。

Answer 6

＆＃13;

.cool_line{ 
    display:block;
    border:none;
    color:white;
    height:1px;
    background:lightgray;
    background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 350, from(lightgray), to(#fff));
}

＆＃13;

Begin

<hr class='cool_line' />

End

＆＃13;

Answer 7

按照其他答案（至少在Chrome 79上不起作用）的建议，增加高度不再适合我，相反，我已经尝试过了，并且可以起作用：

.thickhr{
  border:0.1rem solid black;
  height:0;
}

如何在html中设置水平规则的厚度

7 个答案: