我怎样才能改变我的<hr>标签

我想在CSS中改变我的水平规则(<hr>)的厚度。我知道它可以在HTML中这样做

<hr size="10">

但我听说这是MDN这里上提到的弃用。在CSS中，我尝试使用height:1px，但它不改变厚度。我希望<hr>行有0.5px粗。

我使用的是Ubuntu上的Firefox 3.6.11

594447 次浏览
小开
最佳答案

为了保持一致性，删除任何边框并使用<hr>厚度的height。添加背景色将用指定的高度和颜色来样式你的<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;" />

更长的解释在这里

小开

浏览器中的亚像素渲染

次像素渲染是棘手的。实际上，您不能期望显示器呈现小于一个像素的细线。但它可以提供亚像素尺寸。根据浏览器的不同，它们呈现的效果也不同。查看John Resig的博客。

基本上，如果您的显示器是LCD，并且您正在绘制垂直线，您可以轻松地绘制1/3像素的直线。如果你的背景是白色的，给你的线条颜色#f0f。这条线看起来是1/3像素宽。虽然它会有一些颜色，如果你放大显示器，你会看到整个像素(由RGB组成)只有一个部分是暗的。这是一种用于精细类型暗示的技术，即清晰字体。

但是水平线只能有一个像素高。这是液晶显示器的技术局限性。crt的三角荧光粉甚至更复杂(除非它们是孔径格栅型，即。索尼特丽珑)，但这是另一回事。

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

跨浏览器安全样式

但是水平规则融入通常使用颜色来完成。因此，如果你的背景是白色(#fff)，你总是可以使你的HR 非常浅色。像#eee。

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

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

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

小开

我建议用like结构

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


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

高度属性在HTML 5中已弃用。我要做的是在hr周围创建一个边界 增加边框的厚度:hr style="border:solid 2px black;"< / p >

小开

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

直到HTML5, WAS是一种更短的1px hr: <hr noshade> 但. .<hr>HTML5中不支持。使用CSS代替。(也不是之前使用的其他属性，如大小，宽度，对齐)

现在，这是相当棘手的，但如果最简单的1px hr需要很好的工作:

变体1，黑色hr:(黑色的最佳解决方案)

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

输出:FF, Opera -黑色/ Safari -深灰色

变体2,GRAY hr(最短!):

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

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

变种3，颜色为所需的:

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

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

小开

我增加了线条的不透明度，所以它看起来更薄:

<hr style="opacity: 0.25">
小开

我建议将HR本身设置为0px高，并使用其边框可见。我注意到，当你放大或缩小(ctrl +鼠标滚轮)时，HR本身的厚度会发生变化，而当你设置边框时，它总是保持不变:

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

我相信对<hr>标签进行样式化的最佳成就如下:

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

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

小开

下面是一个没有边界或边缘的1像素黑线的解决方案

hr {background-color:black; border:none; height:1px; margin:0px;}
  • 在谷歌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>

小开
当我把
变厚时，我有一个问题，把颜色改为真正的黑色。 所以我把不透明度改为1，它解决了问题:

hr{
height: 5px;
background-color: black;
opacity: 1;
}
小开

由于浏览器实现的差异，<hr />并不适合自定义。

通常使用div会更简单:

Blah blah
<div style="border-bottom: 1px solid #333;"></div>
More blah blah

小开

还有另一种最简单的方法，只需在标签本身上使用HTML属性，只需在声明'size'属性后添加'noshade'属性。

其中'size'反映了线条的粗细和'noshade'应用背景颜色的线跨越粗细

例如:

<hr size="10" noshade/>

提交答案