如何制作两个色调的 hr 标签？答案

【问题标题】：How can i make a two toned hr tag?如何制作两个色调的 hr 标签？
【发布时间】：2012-06-28 17:08:22
【问题描述】：

我正在制作一条横跨我的标题底部的分隔线。它需要有两个像素高和两种色调。顶部像素需要水平一直是灰色的，底部需要是白色的。我很想将两个 100% 宽度的单像素 div 放在一起，但我希望有人知道用 css 和 hr 标签来做这件事的更好方法？

非常感谢！

【问题讨论】：

【解决方案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;
}

【讨论】：

我同意佐尔坦。如果您需要自定义而不是通用的东西，只需使用p 或div 重新创建效果。可能是 90% 宽。编辑：另外，您可能需要line-height:0px; 来调整浏览器设置。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

您可以使用您的标题的border-bottom 和您的第一个TR 的border-top 吗？

【讨论】：

【解决方案5】：

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

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

<hr />

【讨论】：

不重复？就我个人而言，我认为仅使用 CSS 将远远优于加载整个图像，但即使您使用图像，也请使用 1px x 2px 图像并重复它。否则你真的为这么小的效果创造了太多的开销。

【解决方案6】：

我必须同意 Zoltan 的观点，这是最好的方法。我也很久没看到 HR 标签了。这样做更容易，并且将在浏览器中具有更一致的外观

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

}

【讨论】：