html - 在CSS边框样式中自定义2种颜色

我有这个JSFiddle

<div class="boo">
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
</div>

的CSS

.boo{
   border-left: 12px ridge red;
}

我想自定义两种颜色。我试图将此outline-color:12px solid darkblue放在类boo中，但它不起作用。

最佳答案

要获得12px左边框的两种不同颜色，只需为.boo元素提供6px宽的红色左边框，为内部段落提供另一个6px。宽的蓝色左边框

小提琴示例：http://jsfiddle.net/uyTd7/1/

的CSS

.boo {
    border-left: 6px solid red;
}

p {
    border-left: 6px solid blue;
}

但这将一直有效，直到您有两个元素并且之间没有边距或填充：如果您有一个元素（例如<p>），则可以在现代浏览器中使用box-shadow属性（必要时带有供应商前缀）达到相同的结果，例如

p {
    border-left: 6px solid red;
    box-shadow: -6px 0 0 blue;
}