html - 给上边框两种颜色

Question

我有这个：

<style type="text/css">
  .TopBorderPanel {
     position: relative;
     overflow: hidden; 
     border-top: 2px solid #bbbb9f;
     margin: 1px;
     width: 500px; 
    }
</style>

顶部边框有一种颜色，#bbbb9f，
我想做的是让它有 2 种颜色
50% #bbbb9f 和 50% #cccccc
可能吗？

Answer 1

http://jsfiddle.net/CdWCA/

.TopBorderPanel {
    border-top: 2px solid #bbbb9f;
    position: relative;
}    

.TopBorderPanel:after {
    position: absolute;
    left: 50%;
    right: 0;
    top: -2px;
    border-top: 2px solid #cccccc;
    content: '';
}
​

Answer 2

更好地使用背景 *.gif 平均分成两种颜色，并在顶部使用单个像素的填充：

.TopBorderPanel {
    border: 0;
    background-image: url(...);
    padding-top: 1px;
}

Answer 3

我可以想到两种方法来做到这一点。

我的第一种方法是使用伪选择器，它的作用是添加内容、样式:before或:after元素。因此，实际上您可以为一个元素设置 2 种样式，一种是正常的，然后在该元素之前或之后添加一些额外的样式。

我像往常一样添加了一个边框顶部，然后使用伪选择器添加了另一个边框顶部。

我的第二个解决方案是添加一个盒子阴影，而不是通常看起来像一个漫射阴影，它的样式看起来像元素上方的一个实心阴影。

我创建了一个 jsFiddle，希望能给你一个想法，但如果你不明白，就说吧。

jsFiddle