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

hr {background-color:black; border:none; height:1px; margin:0px;}

在谷歌Chrome测试

我想我应该加上这个，因为其他答案不包括:margin:0px;。

演示

人力资源{背景颜色:黑色;边界:没有;身高:1 px;保证金:0 px;} < span style=" font - family:宋体;"text-align:中心;" > < div风格= " background: lightblue;">↑容器↑<br> <br> <br>↓hr↓</div> . <人力资源> < div风格= " background: lightgreen;“>↑hr↑<br> <br> <br>↓容器↓</div> . < / div >

我建议用like结构

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

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

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

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

例如:

<hr size="10" noshade/>

我认为样式化<hr>标签的最佳成就如下:

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

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

浏览器中的亚像素渲染

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

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

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

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

跨浏览器安全样式

但水平规则通常是用颜色来混合的。因此，如果你的背景是白色(#fff)，你可以让你的HR非常轻。像# eee。

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

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

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

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

<hr style="opacity: 0.25">