我如何制作一个两吨的hr标签？

Question

我正在制作一个跨越标题底部的分隔线。它需要两个像素高和两个色调。顶部像素需要一直横向灰色，底部需要为白色。我很想把两个一个100％宽度的像素div放在一起，但我希望有人知道用css和hr标签做更好的方法吗？

非常感谢！

Answer 1

您应该避免<hr />标记，因为它在不同的浏览器中确实不一致。说实话，我还没有看到它被使用了一段时间。

你可以做的是放置100％宽<p>并给它一个顶部和底部颜色 - http://jsfiddle.net/zSXya/

p.separator {
    height: 0;
    width: 100%;
    border: 0;
    border-top: 1px solid red;
    border-bottom: 1px solid green;
}

Answer 2

典型的方法是使用1 x 2像素的图像作为div的背景，在页面上水平拉伸：

.myCustomHRule
{
  width: 100%;
  background-image: url(path/to/my/image.png);
  background-repeat: repeat-x;
}

Answer 3

通常它只是顶部和底部边框属性。您可以更改它们，然后将样式设置为实体：

http://jsbin.com/ixuyoz/

  hr{
    border-top-color: red;
    border-bottom-color: lime;
    border-style: solid;
  }

Answer 4

您可以使用第一个TR的标题和边框顶部的边框底部吗？

Answer 5

如果您真的想使用HR，可以​​将其背景设置为图像。

hr
{
height:2px;
background: url(image.jpg) no-repeat;
}

<hr />

Answer 6

我必须同意Zoltan这是最好的方法。很长一段时间我也没见过HR标签。这样做更容易，浏览器的外观更加一致

p.separator {
height: 0;
width: 100%;
border: 0;
border-top: 1px solid red;
border-bottom: 1px solid green;

}