具有比內邊界更厚的外邊框的CSS雙邊框

Question

在我目前的工作中，我需要在容器上產生雙邊框。邊框樣式：double;實現這一點，但是我的客戶希望外邊框更厚&內邊框爲正常厚度。

除了創建2個div，1個嵌套在另一個外部div具有更大的厚度，或通過使用邊框圖像有什麼辦法，我可以用CSS只用1格嗎？指定border-style：double;並且仍然能夠使外邊框變粗。

Answer 1

輪廓包含在CSS3規範中，並允許將邊框和輪廓應用於單個元素。

outline屬性與border命令相同。但是，額外的偏移屬性允許邊框在元素的內部或外部進一步移動。

我用輪廓給邊界2種不同的顏色，改變代碼給你的邊界2種不同的大小。

#box { 
border: 1px double #000; 
outline: 2px solid #699; 
outline-offset: -9px; 
}

Answer 2

不，這是不可能的。 CSS邊框寬度指定邊框的總厚度，而不考慮邊框樣式。我沒有看到比將其包裝在另一個DIV中更好的方法。

編輯：你可以使用outline來破解它，但有一個subtle difference between outline and border。

border: double 4px black; 
outline: solid 3px black; 

（這將產生一個1px的內部和4PX外「邊界」，如果你能叫的話）

Answer 3

或者你可以在CSS3使用邊界圖像與新奇的東西，雖然它止跌在大多數目前使用的瀏覽器中不受支持。

Answer 4

您還可以使用：之前像這樣的僞元素：

https://stackoverflow.com/a/11179169/1468708

所以，你可以只在底部具有不同厚度的雙邊框，例如。