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

Question

我想在CSS中更改水平规则的粗细.我知道它可以像HTML那样完成 -

<hr size="10">

但我听说MDN上提到的这个已被弃用了.在CSS我尝试使用,<hr>但它不会改变厚度.我希望height:1px线条很<hr>厚.

我在Ubuntu上使用Firefox 3.6.11

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

这里有更长的解释

Answer 2

浏览器中的子像素渲染

子像素渲染很棘手.实际上,您无法期望显示器渲染小于一条像素的细线.但是可以提供子像素尺寸.根据浏览器,它们以不同的方式呈现.查看John Resig 关于它的博客文章.

基本上,如果您的显示器是LCD并且您正在绘制垂直线,则可以轻松绘制1/3像素线.如果您的背景是白色,请给出您的线条颜色#f0f.对于眼睛,这条线将是像素宽度的1/3.虽然它会有一些颜色,但如果你放大显示器,你会发现只有整个像素的一个部分(由RGB组成)会变暗.这几乎是用于精细类型提示的技术,即ClearType.

但水平线只能是一个完整的像素高.这是LCD显示器的技术限制.CRT显示器是更加复杂与他们的三角荧光粉(除非他们是孔栅型即索尼特丽珑),但是这是一个不同的故事.

基本上提供子像素维度并期望它呈现那种方式与期望整数变量存储数量1.2034759349相同.如果您了解这是不可能的,您应该了解显示器无法呈现子像素尺寸.

跨浏览器安全风格

但混合的水平规则通常使用颜色来完成.所以,如果你的背景是白色的实例(#fff)你总是可以让你HR 很轻.喜欢#eee.

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

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

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

Answer 3

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

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

Answer 4

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

高达HTML5,WAS是1px hr的缩短方式:<hr noshade>但是.. HTML5中不支持<hr>的noshade属性.请改用CSS.(以前使用的其他属性,如尺寸,宽度,对齐)......

现在,这个非常棘手,但如果需要最简单的1px小时,效果很好:

变化1,黑色小时:(黑色的最佳解决方案)

<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红色.

Answer 5

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

使用 div 通常更容易：

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

Answer 6

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

Answer 7

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

<hr style="opacity: 0.25">