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个样式，只有一个正常，然后在这个元素之前或之后添加一些额外的。

我正常添加了一个border-top，然后使用伪选择器添加了另一个border-top。

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

我已经创建了一个jsFiddle，希望能给你一个想法，但如果你不理解，那就说。

jsFiddle

给顶部边框两种颜色

3 个答案: