雙邊框之間沒有空格

Question

我想製作一個雙邊框，但兩者之間沒有空格，雙邊框應該是不同的顏色。我嘗試使用圖像，但我認爲CSS可能可以爲我執行這項工作，我搜索了網絡，但幾乎沒有發現任何接近。

我想要的是總共2px的虛線邊框，頂部顏色爲＃a4a4a4，底部顏色爲＃474747。

任何想法如何我可以做到這一點，而不是創建2個div？

Answer 1

CSS不支持每邊多個邊框顏色。如果你想要兩個不同顏色的虛線邊框，你需要有兩個不同的元素，每個都有不同的樣式邊框。

Answer 2

您最安全的選擇是使用兩個元素，但如果您使用漸進式增強功能，則可以嘗試使用此方法。它將在Safari，Chrome FF 3.6+（Prob 3.5），Opera（至少10.10+）和IE8 +（IE8模式）下工作。它使用僞類來做它的魔法。 注意：它無法在FF 3.0中工作，並留下額外的邊框，但在IE6 & 7中，它只能回落到一個邊框。您可以使用check out a demo。

HTML

<div id="double"> 
    <h2>Double Border</h2> 
    <p>This div <a href="#">should</a> have two borders.</p> 
    <p>There are only normal elements inside.</p> 
</div> 

CSS

#double { 
border: dotted 1px #a4a4a4; 
padding: 10px; 
position: relative; 
} 

#double > * { 
position: relative; 
z-index: 100; 
} 

/* Add an "extra" element using CSS */ 
#double:after { 
content: ""; 
position: absolute; 
z-index: 50; 
border: dotted 1px #474747; 
left: 0; 
top: 0; 
bottom: 0; 
right: 0; 
display: block; 
}