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

<hr size="10">

#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;" />

这里有更多解释

#2 楼

浏览器中的亚像素渲染

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

基本上，如果您的显示器是LCD且正在绘制垂直线，则可以轻松地绘制1/3像素的线。如果您的背景是白色，则将线条颜色设置为#f0f。肉眼看这条线将是像素宽度的1/3。尽管它会是某种颜色，但是如果您放大显示器，您会看到整个像素（由RGB组成）中只有一个片段是暗的。这是用于精细类型提示（即ClearType）的大量技术。

但是水平线只能是整个像素高。那就是液晶显示器的技术局限性。 CRT的三角形荧光粉更加复杂（除非它们是孔径格栅类型，例如Sony Trinitron），但这是另一回事。

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

跨浏览器安全的样式

但是水平线融合的方式通常使用颜色完成。因此，如果您的背景例如是白色（#fff），则可以始终使HR非常亮。像#eee一样。

用于非常轻量级水平规则的跨浏览器安全样式将是：

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

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

#3 楼

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

直到HTML5，WAS都是1px hr的更短方法：

---

但是。.HTML5不支持

---

的noshade属性。请改用CSS。 （也没有使用其他服装，例如尺寸，宽度，对齐）...


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

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

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

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


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

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

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

版本3，根据需要选择颜色：

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

输出：Opera / FF / Safari：1像素红色。

#4 楼

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

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

#5 楼

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

#6 楼

我向该行添加了不透明度，因此它看起来更薄：

<hr style="opacity: 0.25">

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

在Google Chrome浏览器中测试过

我认为我会添加此内容，因为其他答案不包括：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 楼

我建议使用类似

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

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

的构造