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

我想改变CSS中水平线的粗细。 我知道这可以用HTML来完成,

<hr size="10"> 

但是我听到这个在MDN上提到这个就不赞成 了 。 在CSS中我尝试使用height:1px但它不会改变厚度。 我想<hr>一行是0.5px厚。

我在Ubuntu上使用Firefox 3.6.11

为了一致性,删除任何边界,并使用<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;" /> 

这里再解释一下

浏览器中的子像素渲染

子像素渲染是棘手的。 实际上,您不能期望显示器渲染的像素细线不足。 但是可以提供子像素尺寸。 根据浏览器的不同,这些呈现方式不同。 检查这个约翰Resig的博客文章 。

基本上,如果您的显示器是液晶显示器,并且您正在绘制垂直线,则可以轻松绘制1/3像素线。 如果你的背景是白色的,给你的#f0f线颜色。 眼睛这条线将是1/3的像素宽。 虽然它会有一些颜色,但是如果你放大显示器,你会发现整个像素中只有一个部分(包括RGB)会变暗。 这是非常多的技巧,用于精细的types提示即ClearType 。

但水平线只能是一个完整的像素高。 这是液晶显示器的技术限制。 CRT的三angular荧光粉更为复杂(除非它是光栅格式,即Sony Trinitron),但这是另一回事。

基本上提供一个子像素维度,并期望它以这种方式呈现是相同的预期一个整数variables来存储数量1.2034759349。 如果你明白这是不可能的,你应该明白,监视器不能呈现子像素尺寸。

跨浏览器的安全风格

但是混合的水平规则通常是用颜色来完成的。 所以如果你的背景是白色的( #fff ),你总是可以使你的HR 非常轻。 像#eee

非常轻的横向规则的跨浏览器安全风格将是:

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

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

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

对于HTML5,WAS是1px小时的更短path:<hr noshade>但是.. <hr>的noshade属性在HTML5中不受支持。 改用CSS。 (也没有其他attibutes使用之前,作为大小,宽度,alignment )…


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

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

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

height属性已经在html 5中被弃用了。我要做的是在hr周围创build一个边框,并增加边框的粗细,如下所示:hr style =“border:solid 2px black;”

我build议使用像

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