在纯CSS中指定一个具有两种不同颜色的边框

Question

如果我需要添加与附加图片相似的边框，是否可以像1px实心边框一样指定颜色1/颜色2。我知道可以将这个边框添加为图像，但我想知道是否可以使用纯CSS来完成。

- Mike

Answer 1

您可以使用伪元素:before和:after来在元素上实现多个边框的效果。 请参考此页面中的示例：http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/demo/borders.html 以下是使用此技术的演示（仅包含您所描述的顶部边框）：http://jsfiddle.net/m7g6L/

div {
    border-top: 3px solid #00f;
    position: relative;
    z-index: 10;
    margin: 10px;
    width: 200px;
}

div:before {
    content: "";
    border-top: 1px solid #f00;
    position: absolute;
    top: 0;
    left: 0;
    right:0;
    z-index: -1;
}

- Jona

Answer 2

尝试这个。将元素包含在一个 div 中，然后使用该 div 来消除边距和边框以实现所需的效果，像这样：

<div style="border-top: solid red 2px; margin: none; padding: 0px;">
<p style="margin-top: 0px; border-top: solid blue 2px;">This is a paragraph.Blah Blah 
Blah Blah</p>
</div>

我试过它，有效了。

- Aaron Wright

Answer 3

是的，使用outline:。

公平警告：它可能会影响某些元素的焦点。

示例

- Madara's Ghost

---

如果我只说border-top或border-bottom，那么outline会发生什么？ - Mike

Answer 4

你可以使用多个元素，并调整内边距和背景：

http://jsfiddle.net/SJFx4/

虽然不完全符合语义，但它可以工作 - 您可以使用伪元素来实现相同的效果

- Thomas

---

我不想创建一个不必要的div并给它白色背景以产生幻觉。 - Mike

Answer 5

严格来说，据我所知，CSS不支持多重边框。

尽管如此，您可以通过将普通边框与轮廓线相结合来实现所需的视觉效果：

#myElement    {
    border:  solid 2px blue;
    outline: solid 2px red;
}

如果您需要外部“边框”只出现在一个侧面，例如top，那么最简单的解决方案是使用一个包含的

元素：

div .borderHelper    {
    border-top:  solid 2px red;
    margin:      none;
    padding:     0;
}

#myElement    {
    border-top:  solid 2px blue;
}

- Luc125

---

再说一遍，我只需要这个用于元素的border-top或border-bottom。 - Mike

真的有叫做 outline-top 和 outline-bottom 的东西吗？请查看 Truth 的评论。 - Mike

亲爱的，没错，只有outline...很抱歉，我真的以为那些属性存在。多亏了你，我学到了东西。 - Luc125