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

我可以指定像1px纯色1/color2这样的边框吗。对于这种情况，如果我必须放置一个像所附图片一样的边框。我知道我可以把这个边框作为一个图像，但是我正在寻找是否可以用纯css来实现。

是的，使用

大纲：

合理的警告：它可能会使焦点与某些元素混淆

---

您还可以使用pseude元素

：before

和

：after

在一个元素上实现多个边框的效果。 有关示例，请参见本页

下面是使用此技术的ja演示（仅限于您描述的顶部边框）：

---

严格地说，据我所知，CSS不支持多边框

尽管如此，通过将普通边框与轮廓相结合，您仍然可以在视觉上获得所需的效果：

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

如果需要外部“边框”仅显示在一侧，例如

top

，则最简单的解决方案是使用封闭的div元素：

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

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

---

您可以使用多个元素并使用填充和背景：

---

不完全是语义上的，但它是有效的——您可以使用伪元素来实现相同的效果。将元素包含在div中，然后使用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>

这是一个段落。废话
废话

---

当我尝试它时，它起了作用。

如果我不得不说只有边框顶部或边框底部，那么outlineAgain会发生什么，但我只需要这个元素的边框顶部或边框底部。确实有一个东西叫做“大纲顶部”和“大纲底部”，请参见真理的评论亲爱的，这是真的，只有

大纲

。。。对不起，我真的以为这些财产是存在的。感谢你，我学到了一些东西。我不想创建一个不必要的div，也不想用白色背景来创建幻觉，谢谢你的链接，+1添加并接受

<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>