給頂部邊框兩種顏色

我有這樣的：
給頂部邊框兩種顏色

<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
可能嗎？

來源

2012-08-10 Roland

像isntantly中途改變？或者是一個漸變？ – Andy 2012-08-10 10:59:14

瞬間，從一種顏色到另一種，像兩個塊 – Roland 2012-08-10 10:59:47

不，沒有辦法，除非你把div分成兩個相等的div – Andy 2012-08-10 11:00:07

更好的使用背景* .gif要點等分成兩種顏色，並用填充的單個像素的頂部：

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

來源

2012-08-10 11:02:45 Bakabaka

我能想到的這樣做的2種方式。

我的第一種方法是使用僞選擇器，它所做的是添加內容，或樣式:before或:after的一個元素。因此，實際上，對於一個元素，可以有兩種樣式，正常情況下只有一種，然後在該元素之前或之後添加一些額外元素。

我已經添加了一個邊框頂部，正常，然後添加與僞選擇器的另一個邊框頂部。

我的第二個解決方案是添加一個箱形陰影，而不是通常看起來像散射陰影，它的樣式看起來像元素上方的實心陰影。

我創建了一個jsFiddle，希望給你一個想法，但如果你不明白只是說。

jsFiddle

來源

2012-08-10 11:28:29

你已經把它垂直切割了，我想要的是垂直切割它，就好像它是2個單元 – Roland 2012-08-10 11:33:10

然後用border-left或者'border-left'或'邊框right'？ – 2012-08-10 11:43:47

只是重新閱讀你的評論，並認爲我誤解了，創造了另一種做法，所以拆分是在Y軸下。 [jsFiddle]（http://jsfiddle.net/wigster/SuFgj/） - 可能看起來令人困惑的CSS，但這只是所有供應商的前綴，以便它在大多數瀏覽器中看起來是相同的。 – 2012-08-10 11:59:01

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

來源

2012-08-10 11:57:49 RoToRa

給頂部邊框兩種顏色

回答

相關問題