透明邊框添加到寬度x高度

邊框應該超出div的寬度x高度。但是，這jsfiddle - http://jsfiddle.net/L33cK/5/ - 顯示邊框增加當它們是透明時div的寬度x高度。當我給出透明的1px邊框時，我希望jsfiddle中的行爲1px，但是它是3px。透明邊框添加到寬度x高度

有沒有人知道這裏發生了什麼？我正在用Chrome瀏覽它。

感謝

div#line { 
    margin-left:100px; 
    width:1px; 
    height:200px; 
    background-color:red; 
    border:1px solid transparent; 

}

2013-12-12 Steve

好吧，如果你刪除它的工作原理'solid' – Amber

@Amber默認的邊框樣式（如果你不提供一個）是'none'，這意味着，沒有邊框。 –

@MrLister確實如此，但是從描述中可以看出，OP或者想要這個，或者是你的解決方案。「 – Amber

邊界是透明的，所以你可以通過它們看到div的背景。就這麼簡單。

在this updated fiddle我添加了具有虛線邊框另一個DIV。

background:red; border:10px dotted yellow

而且你可以看到邊界點之間的div背景。

所以如果你想讓邊框成爲身體背景的顏色，解決辦法是不要讓它們透明，但要給它們與身體相同的背景色。或者，使用邊際而不是邊界。

由於div在內容框模式（*）下，CSS width屬性不指定div的總外部寬度，而是指定其內容區域。外部寬度等於width加上填充的大小加上邊框的大小。（如果您給div一些填充以及，即使width屬性保持爲1px，也會看到外部寬度變得更大。）

（*）您可以使用box-sizing屬性更改此行爲。請參閱MDN page關於如何使用它以及要應用的供應商前綴。基本上，box-sizing: border-box你告訴瀏覽器width被視爲元素的外部寬度，而不是內容區域。

2013-12-12 15:09:15

」邊界是透明的，所以你可以通過它們看到div的背景，就這麼簡單。「但是div只有1px寬，所以透明邊框後面不應該有任何div。 – Steve

你說div的寬度是1px，但實際上，它是1px的CSS'width'屬性。在這種情況下，等於div的_content area_。我會更新答案。 –

回答