html - 如何制作两个色调的 hr 标签？

Question

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

非常感谢！

score 5 · Accepted Answer

您应该避免使用该<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;
}

score 1 · Accepted Answer

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

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

score 1 · Accepted Answer

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

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

score 0 · Accepted Answer

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

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

}

score 0 · Accepted Answer

0

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

于 2012-06-28T17:12:41.280 回答

score 0 · Accepted Answer

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

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

<hr />

6 回答 6