html - 在 PURE CSS 中指定具有两种不同颜色的边框

Question

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

Answer 1

你也可以通过伪元素:before和:after实现一个元素多边框的效果。 有关示例，请参阅此页面 http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/demo/borders.html

这是使用此技术的 ja 演示(只有您描述的顶部边框):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;
}