自定义css边框样式中的2种颜色

Question

我有JSFiddle

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

CSS

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

我想自定义两种颜色。我试着将这个outline-color:12px solid darkblue放在班级中，但它不起作用..

Answer 1

有几种方法可以添加另一个'边框'

<强> 1。使用轮廓（虽然不会使用圆角） http://www.w3schools.com/css/css_outline.asp

<强> 2。使用：after＆amp; ：前

：after和：before允许您使用完全可自定义的边框（和轮廓）创建一个全新的元素。限制是你的创造力

第3。边框风格＆amp;图片

有许多种类的边框样式，如实心，虚线，点缀，山脊等。您也可以轻松地使用重复图像作为边框

Answer 2

试试这个

.boo{
    border-left: 12px solid red;
    outline:12px solid darkblue ;
}
p{
    padding-left:10px;
}

一个限制是IE6和IE7不支持outline属性。

Answer 3

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

示例小提琴：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;
}

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