css三重邊框？

Question

你好，我試圖用css創建一個三重邊框。現在我得到的是兩個邊框，但第二個邊框不完全圍繞元素（div.container#main）。

我一直在關注這個blog post。 JSFiddle。

上得到邊界去圍繞元素完全將是巨大的任何幫助。

Answer 1

所以基本上問題是你使用的位置aboslute和計算從撥錯元件的東西。

當事情絕對定位只上漲高度指定高度時，或當元素有內容。一種用於在這種情況下的解決辦法是分配一個都和top值bottom，這將基本上使元件exapand。您忘記了bottom的值。添加它給了我們這樣的：

http://jsfiddle.net/J3e9R/2/

但是你會注意，現在的元素進入到視口的底部。這是因爲如果沒有定位的父級（相對，絕對，靜態），它將默認爲頂級元素作爲定位上下文。

爲了解決這個問題，我們可以添加一個額外的包裝元素，並給它定位相對的，或者我們可以將我們的邊框樣式到你的div.row;無論哪種方式，技術是相同的，只是取決於您是否可以添加另一個包裝或div.row是否適合您的情況。因此，讓這樣的：

http://jsfiddle.net/J3e9R/3/

現在你可以看到，我們其實有內部邊界協同工作與框的尺寸。但是現在我們的立場是關閉的。這是因爲，而不是計算我們從外部要素#main我們從內部工作補償了，所以我們需要反轉我們的測量：

http://jsfiddle.net/J3e9R/4/

好了，現在我們又回到了其在外部訂單我們的原包裝盒的邊緣，所以我們只需要把它給我們的外邊框的正中間，所以我們僅僅指剛測量改變的一半左右，終於給我們我們想要的東西：

http://jsfiddle.net/J3e9R/1/