两个颜色边框

Question

我知道可以使双边框的效果低于另一个但是可以使用css将边框宽度的一部分设为一种颜色，其余部分是另一种颜色吗？

以下是我想要仅使用css重新创建为边框的图像示例：

Answer 1

<强>更新

看到帖子中的线条实际上是双色线条，您可以使用border-image属性来实现类似的效果（示例仅显示原则，但未针对完美匹配进行调整）：

的 ONLINE DEMO

CSS：

div {
    border-top:0;
    border-bottom:1px;
    -webkit-border-image: -webkit-gradient(linear, left bottom, right bottom, from(#07f), to(#000), color-stop(0.3, #07f), color-stop(0.31, #000)) 21 20 30 21;
     /* ... */
}

对于其他浏览器：

-moz-border-image:
-webkit-border-image:
-o-border-image:
 border-image: /* standard */

请注意，渐变参数因浏览器而异，因此需要进行调整。提供的演示仅适用于webkit浏览器。

<强>旧

你的意思是这样的：

为此，您可以使用以下CSS：

.myClass {
    height:40px;
    width:60px;
    border:5px solid #00a;
    box-shadow:0 0 0 5px #f00 inset;
    padding:5px;
}

这里box.shadow设置为没有模糊的插图充当边框的第二部分。填充应防止内容重叠。

的 ONLINE DEMO

Answer 2

我想我找到了一种方法。看看http://jsfiddle.net/RE4A7/

HTML

<ul>
<li><h3>Mission</h3>
</li>
</ul>

CSS

ul h3 {
font-size:1.2em;
font-family:arial;
border-bottom:1px solid #333;
padding-bottom:10px;
position:relative;
width:250px;
}
ul li {
list-style:none;
}
ul h3:after {
border-bottom:1px solid #ff4800;
bottom:-1px;
left:0px;
content:"";
position:absolute;
width:55px;
}