给顶部边框设置两种颜色

Question

我有这个：

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

顶部边框只有一种颜色，#bbbb9f，
我想要做的是让它变成两种颜色
50% #bbbb9f 和 50% #cccccc
这可行吗？

- Roland

---

像半途更改立即生效？或者是渐变效果？ - Andy

瞬间，从一种颜色到另一种颜色，就像两个方块。 - Roland

不，除非你将 div 分成两个相等的 div，否则没有办法。 - Andy

可能是CSS：双色边框的重复问题。 - Zoltan Toth

只是为了确认一下：您想要水平分割边框（两个1像素的线重叠在一起），还是垂直分割（左半部分一种颜色，右半部分另一种颜色）？ - RoToRa

垂直排列，左边一种颜色，右边另一种颜色。 - Roland

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: '';
}
​

- RoToRa

Answer 2

更好的做法是使用一个背景 *.gif 图片，将其平均分为两种颜色，并在顶部使用一个单像素的填充：

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

- Bakabaka

Answer 3

我可以想到两种方法来实现这个。

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

我已经添加了一个普通的border-top，然后使用伪选择器添加了另一个border-top。

我的第二种解决方案是添加一个box-shadow，它不像通常看起来像一个扩散的阴影，而是被设计成在元素上方看起来像一个实心的阴影。

我创建了一个jsFiddle，希望能给您一个想法，但如果您不理解，请告诉我。

jsFiddle

- Alexander Wigmore

---

你已经水平地切割了它，我想要的是垂直地切割它，就像它是2个单元格一样。 - Roland

那么，你可以使用 border-left 或 border-right 代替 border-top？ - Alexander Wigmore

刚刚重新阅读了您的评论，并且认为我误解了它，所以创建了另一种方法来完成任务，因此拆分是沿着 y 轴进行的。jsFiddle - 在 CSS 中可能看起来很混乱，但那只是所有供应商前缀，这样它在大多数浏览器中看起来都一样。 - Alexander Wigmore