如何在HTML中设置水平线的粗细？

Question

如何在HTML中设置水平线的粗细？

htmlcss

12

如何在html/CSS中设置水平线的粗细

- jslearner

8个回答

13

如果你的文档中有很多的<hr />，只需要在<head>部分添加一个样式即可。

hr
{
    border: 5px solid #000;
}

将5px更改为您想要的任何值。

编辑：不要使用高度，这会使您的水平线变空心，除非那正是您想要的。

这里有一个简单的例子：http://jsfiddle.net/ErdXg/ ，尝试一些颜色和厚度，并进行尝试。

- LocustHorde

如果提问者想要一个空的水平线，该怎么办？ - Neil Knight

2

我知道这个解决方案有点技巧性。但对我来说，它是一条黑线而不是一个空心矩形。而且我想要它粗！所以这最符合我的需求。 - Bitterblue

1

不错！更进一步： <hr style='border-top: 1px solid lightgray;' /> - boateng

1

包括Firefox：

hr {
  border: none;
  border-bottom: 1px solid #9b9b9b;
}

- Anar Salimkhanov

0

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

Begin

<hr class='cool_line' />

End

- boateng

确实是一句很酷的话，但它几乎没有回答所问的问题。 - undefined

0

对于其他HR属性的示例，请点击这里

- BigFatBaby

0

你可以使用CSS，像这样：

hr {
    height: 20px;
}

- Agos

0

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

就是这样，呵呵，只需更改背景颜色就可以了。

- Tibe

0

在其他答案中建议的添加高度对我不再起作用（至少在Chrome 79上不起作用），相反，我尝试了这个方法，它有效：

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

- aderchox

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Neil Knight · Accepted Answer

你可以使用 SIZE 属性：

<hr size="3" />

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

hr {
    height: 3px;
}