6

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

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

图片

4

2 回答 2

5

我想我找到了一种方法来做到这一点。看看这个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;
}
于 2013-07-11T02:01:39.970 回答
5

更新:

看到帖子中的线实际上是两条颜色的线,您可以使用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

于 2013-07-11T01:55:33.993 回答