我想<hr>
在CSS中更改水平线()的厚度。我知道可以像这样用HTML完成-
<hr size="10">
但是我听说这里已弃用了MDN。在CSS中,我尝试使用,height:1px
但它不会改变厚度。我想把<hr>
线0.5px
弄粗。
我在Ubuntu上使用Firefox 3.6.11
我想<hr>
在CSS中更改水平线()的厚度。我知道可以像这样用HTML完成-
<hr size="10">
但是我听说这里已弃用了MDN。在CSS中,我尝试使用,height:1px
但它不会改变厚度。我想把<hr>
线0.5px
弄粗。
我在Ubuntu上使用Firefox 3.6.11
Answers:
为了保持一致性,请移除所有边界,并使用高度作为<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;" />
在这里更长的解释
border:none
?任何原因?边框也会增加厚度吗?
<hr style="border: none; height:1px; color:#333; background-color:#333;">;
color
多久后退?
亚像素渲染很棘手。实际上,您不能指望监视器渲染出小于像素的细线。但是有可能提供亚像素尺寸。根据浏览器的不同,它们的呈现方式也不同。查看此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文件代替内联样式。它们为整个站点提供了中心定义,而不仅仅是特定元素。它使可维护性更好。
我一直在寻找绘制1px线的最短方法,因为分开的CSS的全部负载并不是最快或最短的解决方案。
在HTML5之前,WAS是1px hr的更短方法:<hr noshade>,但是。.HTML5不支持<hr>的noshade属性。请改用CSS。(以及之前使用过的其他服装,例如大小,宽度,对齐)...
现在,这很棘手,但是如果需要最简单的1px hr时,它会很好用:
版本1,黑色小时:(黑色最佳解决方案)
<hr style="border-bottom: 0px">
输出:FF,Opera-黑色/ Safari-深灰色
变化2,灰色小时(最短!):
<hr style="border-top: 0px">
输出:Opera-深灰色/ FF-灰色/ Safari-浅灰色
<hr style="border: none; border-bottom: 1px solid red;">
输出:Opera / FF / Safari:1px红色。
我建议将HR
自身设置为0px
高,并使用其边框为可见。我注意到,当您放大和缩小(Ctrl +鼠标滚轮)时,HR
其自身的厚度会发生变化,而在设置边框时,其厚度始终保持不变:
hr {
height: 0px;
border: none;
border-top: 1px solid black;
}
这是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>
我建议使用类似的构造
<style>
.hr { height:0; border-top:1px solid _anycolor_; }
.hr hr { display:none }
</style>
<div class="hr"><hr /></div>