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

How can I change the thickness of my <hr> tag

提问by Srikar Appalaraju

I want to change the thickness of my horizontal rule (<hr>)in CSS. I know it can be done in HTML like so -

我想<hr>在 CSS 中更改水平线 ( )的粗细。我知道它可以像这样在 HTML 中完成 -

<hr size="10">

But I hear that this is deprecatedas mentioned on MDN here. In CSS I tried using height:1pxbut it does not change the thickness. I want the <hr>line to be 0.5pxthick.

但是我听说MDN here上提到了这已被弃用。在 CSS 中我尝试使用但它不会改变厚度。我希望这条线很粗。height:1px<hr>0.5px

I am using Firefox 3.6.11 on Ubuntu

我在 Ubuntu 上使用 Firefox 3.6.11

回答by Gregg B

For consistency remove any borders and use the height for the <hr>thickness. Adding a background color will style your <hr>with the height and color specified.

为了保持一致性，移除所有边框并使用高度作为<hr>厚度。添加背景颜色将<hr>使用指定的高度和颜色设置样式。

In your stylesheet:

在您的样式表中：

hr {
    border: none;
    height: 1px;
    /* Set the hr color */
    color: #333; /* old IE */
    background-color: #333; /* Modern Browsers */
}

Or inline as you have it:

或内联，因为你有它：

<hr style="height:1px;border:none;color:#333;background-color:#333;" />

Longer explanation here

更长的解释在这里

回答by Robert Koritnik

Sub-pixel rendering in browsers

浏览器中的子像素渲染

Sub-pixel renderingis tricky. You can't actually expect a monitor to render a less than a pixel thin line. But it's possible to provide sub-pixel dimensions. Depending on the browser they render these differently. Check this John Resig's blog postabout it.

亚像素渲染很棘手。您实际上不能指望显示器渲染小于像素的细线。但是可以提供子像素尺寸。根据浏览器的不同，它们以不同的方式呈现这些。查看 John Resig关于它的博客文章。

Basically if your monitor is an LCD and you're drawing vertical lines, you can easily draw a 1/3 pixel line. If your background is white, give your line colour of #f0f. To the eye this line will be 1/3 of pixel wide. Although it will be of some colour, if you'd magnify monitor, you'd see that only one segment of the whole pixel (consisting of RGB) will be dark. This is pretty much technique that's used for fine type hinting i.e. ClearType.

基本上，如果您的显示器是 LCD 并且您正在绘制垂直线，则可以轻松绘制 1/3 像素线。如果你的背景是白色的，给你的线条颜色#f0f。对眼睛来说，这条线将是 1/3 像素宽。虽然它是某种颜色，但如果你放大显示器，你会看到整个像素（由 RGB 组成）中只有一部分是暗的。这几乎是用于精细类型提示的技术，即ClearType。

But horizontal lines can only be a full pixel high. That's technology limitation of LCD monitors. CRTs were even more complicated with their triangular phosphors (unless they were aperture grilletype ie. Sony Trinitron) but that's a different story.

但是水平线只能是一个完整的像素高。这是液晶显示器的技术限制。CRT 的三角形荧光粉甚至更加复杂（除非它们是孔径格栅类型，即索尼特丽珑），但那是另一回事。

Basically providing a sub-pixel dimension and expecting it to render that way is same as expecting an integer variable to store a number of 1.2034759349. If you understand this is impossible, you should understand that monitors aren't able to render sub-pixel dimensions.

基本上提供一个子像素维度并期望它以这种方式呈现与期望一个整数变量来存储 1.2034759349 的数字相同。如果您明白这是不可能的，您应该明白显示器无法渲染子像素尺寸。

Cross browser safe style

跨浏览器安全风格

But the way horizontal rules that blend inare usually done using colours. So if your background is for instance white (#fff) you can always make your HRverylight. Like #eee.

但是融合的水平规则的方式通常是使用颜色来完成的。因此，如果您的背景是例如白色 ( #fff)，您总是可以使您的背景HR非常亮。喜欢#eee。

The cross browser safe style for very light horizontal rule would be:

非常轻的水平线的跨浏览器安全样式是：

hr
{
    background-color: #eee;
    border: 0 none;
    color: #eee;
    height: 1px;
}

And use a CSS file instead of in-line styles. They provide a central definition for the whole site not just a particular element. It makes maintainability much better.

并使用 CSS 文件而不是内嵌样式。它们为整个站点提供了一个中心定义，而不仅仅是一个特定元素。它使可维护性更好。

回答by Muscaria

I was looking for shortest way to draw an 1px line, as whole load of separated CSS is not the fastest or shortest solution.

我正在寻找绘制 1px 线的最短方法，因为分离 CSS 的整个负载不是最快或最短的解决方案。

Up to HTML5, the WAS a shorter way for 1px hr: <hr noshade> but.. The noshade attribute of <hr> is not supported in HTML5. Use CSS instead.(nor other attibutes used before, as size, width, align)...

在 HTML5 之前，对于 1px hr 来说是一种更短的方式： <hr noshade> 但是.. HTML5 不支持 <hr> 的 noshade 属性。改用 CSS。（也没有之前使用的其他属性，如大小、宽度、对齐）...

---

---

Now, this one is quite tricky, but works well if most simple 1px hr needed:

现在，这个非常棘手，但如果需要最简单的 1px hr 效果很好：

Variation 1, BLACK hr: (best solution for black)

变体 1，BLACK hr：（黑色的最佳解决方案）

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

Output: FF, Opera - black / Safari - dark gray

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

---

---

Variation 2, GRAY hr (shortest!):

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

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

Output: Opera - dark gray / FF - gray / Safari - light gray

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

---

---

变体 3，根据需要选择颜色：

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

Output: Opera / FF / Safari : 1px red.

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

回答by Yaerius

I would recommend setting the HRitself to be 0pxhigh and use its border to be visible instead. I have noticed that when you zoom in and out (ctrl + mouse wheel) the thickness of HRitself changes, while when you set the border it always stays the same:

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

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

回答by meddy

height attribute has been deprecated in html 5. What I would do is create a border around the hr and increase the thickness of the border as such: hr style="border:solid 2px black;"

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

回答by Gaunt

I added opacity to the line, so it seems thinner:

我给这条线添加了不透明度，所以它看起来更薄：

<hr style="opacity: 0.25">

回答by Jodyshop

I believe the best achievement for styling <hr>tag is as follow:

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

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

And for the HTML code just add: <hr>.

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

回答by theMaxx

Here's a solution for a 1 pixel black line with no border or margin

这是一个没有边框或边距的 1 像素黑线的解决方案

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

• Tested in Google Chrome

• 在谷歌浏览器中测试

I thought I would add this because the other answers didn't include: margin:0px;.

我想我会添加这个，因为其他答案不包括：margin:0px;。

• Demo

• 演示

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>

回答by Ankheg

I suggest to use construction like

我建议使用像

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

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