如何更改 <hr> 标签的粗细

Posted 2023-03-25

【中文标题】如何更改 <hr> 标签的粗细

【英文标题】：How can I change the thickness of my <hr> tag

【发布时间】：2011-05-08 07:04:57

【问题描述】：

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

<hr size="10">

但我听说这是deprecated，正如MDN here 中提到的那样。在 CSS 中，我尝试使用 height:1px，但它不会改变粗细。我希望<hr> 线是0.5px 厚。

我在 Ubuntu 上使用 Firefox 3.6.11

【问题讨论】：

我希望它真的很薄，除非他专门寻找它，否则用户不应该注意到它的存在。无论如何尝试......

你也可以试着让它更像背景的颜色，让它融入...

因为 1px 是最小的，如果你想让它不那么明显，你应该把它变成浅灰色。

@MovieYoda：尺寸可以达到亚像素，但渲染将四舍五入到最接近的像素。这就像期望一个整数值是 1.23784... 不可能。您可以将其设置为这种值，但它会四舍五入到最接近的整数。从理论上讲，由于技术细节，您可以在 LCD 上将宽度四舍五入为像素的 1/3，但我怀疑浏览器实际上也这样做。剩余的亚像素尺寸不能是任何颜色，因为它只与一种 RGB 荧光粉有关。

不是半像素，半像素。这个问题并不完全愚蠢。 reddit.com/r/shittyprogramming/comments/20zyea/…

【参考方案1】：

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

更长的解释here

【讨论】：

你为什么要发border:none？任何原因？边框也会增加厚度吗？

是的，我们想使用背景颜色来显示线条以保持一致性。 FF 使用边框来创建

是的，我一直觉得跨浏览器的

多少 IE 的后备 color？

你如何使用这种方法处理风格？ （即虚线、点线、实线等）

【参考方案2】：

浏览器中的亚像素渲染

Sub-pixel rendering 很棘手。您实际上不能期望显示器呈现小于像素的细线。但是可以提供亚像素尺寸。根据浏览器的不同，它们会以不同的方式呈现这些内容。查看 John Resig 的 blog post 关于它的信息。

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

但是水平线只能是一个完整的像素高。这是液晶显示器的技术限制。 CRT 的三角形荧光粉更加复杂（除非它们是 aperture grille 类型，即 Sony Trinitron），但这是另一回事。

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

跨浏览器安全样式

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

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

hr

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

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

【参考方案3】：

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

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

【讨论】：

我可以看到，在最新的 Chrome 中，它在页面其余部分的厚度发生了变化。更糟糕的是，如果你缩小它可能会消失:(

【参考方案4】：

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

在 HTML5 之前，1px hr 的 WAS 更短：

---

但是..

（也不是以前使用的其他属性，如 size、width、align）...

---

现在，这个很棘手，但如果需要最简单的 1px hr 就可以了：

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

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

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

---

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

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

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

---

变体 3，根据需要的颜色：

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

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

【讨论】：

我很高兴，如果请有人会为 Chrome 和 IE 测试它。前两个变体非常棘手，尤其是。第二个变体，输出可见的第一个 BLACK 1px。

我喜欢这个解决方案，因为它不会硬编码任何颜色信息，这对于与暗模式的兼容性很有用。在 Chrome 上运行正常。

【参考方案5】：

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

<hr style="opacity: 0.25">

【参考方案6】：

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

【参考方案7】：

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

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

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

【参考方案8】：

这是一个没有边框或边距的 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>

【参考方案9】：

我在制作时遇到了将颜色更改为纯黑色的问题

---

更厚。 所以我将不透明度更改为 1，它解决了问题：

hr
    height: 5px;
    background-color: black;
    opacity: 1;

【参考方案10】：

我建议使用类似的构造

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

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

【讨论】：

嘿嘿嘿 :) 以前没见过这个 :)

如果可以使用 HR，为什么还要创建 DIV 来模拟 HR？

我认为他说得有道理。使用div 而不是hr 可以消除行的顶部和底部不需要的边距。