html - 两种颜色边框

Question

我知道有可能产生双边框的效果，一个在另一个下方，但是是否可以使用 css 使边框的部分宽度具有一种颜色，而其余部分则为另一种颜色？

这是我想仅使用 css 将其重新创建为边框的图像示例：

Answer 1

我想我找到了一种方法来做到这一点。看看这个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;
}

Answer 2

更新：

看到帖子中的线实际上是两条颜色的线，您可以使用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 设置为 inset 没有模糊作为边框的第二部分。填充应防止内容重叠。

ONLINE DEMO