在CSS中插入多行到邊框？

Question

我有一個頁面，我想讓邊框回到多行。

h2.bord 
{ 
border-style:inset; 
border-width:8px; 
border-color:green; 
background-color:black; 
color:white; 
text-align:center; 
} 

這（使用時）顯示文本週圍的邊框。 不過， 我想要在這個邊界比我多一條線。

幫助？

Answer 1

使用一個div邊框和地方在這裏面H2 BORD

Answer 2

是border-style:double;你在找什麼？另外，如果你想要的不只是雙邊框或多種樣式的邊框，你可以使用多個嵌套div，例如：

<style> 
    .inset-border { border: 4px inset Black; } 
    .double-border { border: 4px double Black; } 
</style> 

<div class="inset-border"> 
    <div class="double-border"> 
    <h2>content</h2> 
    </div> 
</div> 

Answer 3

標準的CSS邊界只支持最多的雙線（參見@ Jaimal的答案）。

如果你需要更多的，你需要嘗試以下操作：

• 附加標記：即更多的容器元素，每一個都有自己的邊界。
• 使用:before和:after並給它們一個border。完成的權利，他們應該包裹原來的箱子，並給你額外的邊界。在IE6或IE7中無法使用。
• 除了border之外，還使用outline屬性。大綱的工作方式與邊界非常相似，但確實有一些細微差別。如果使用border-style:double;，它可以給你第三個邊框。請注意，它可能不適用於舊版瀏覽器。
• CSS3 border-image。使用此功能，您可以爲邊框定義自己的圖形，這意味着您可以根據需要定義多條線。注意：這絕對不適用於舊版瀏覽器;它只是CSS的一個相當新的補充。
• 使用background-image來僞造它。如果你知道你的盒子的大小，這可能是最簡單，最具跨瀏覽器兼容性的方法。如果你事先不知道盒子的大小，那麼它就不那麼有用了。

希望有幫助。

Answer 4

我假設你正在嘗試實現3d /'凸起'類型的邊框;如果是這樣，那麼你可以簡單地使用border-style: groove：JS Fiddle demo。

但是，如果你能，你可以使用::after僞元素和outset邊框樣式：

h2.bord { 
    border-style:inset; 
    border-width:8px; 
    border-color:green; 
    background-color:black; 
    color:white; 
    text-align:center; 
    position: relative; /* in order to position the pseudo element relative to the parent */ 
    margin: 8px; /* to move the edges of the element from the container element in order to see the borders of the pseudo-element */ 
} 

h2.bord::after { 
    content: ''; 
    position: absolute; 
    top: -16px; 
    left:-16px; 
    right: -16px; 
    bottom: -16px; 
    border: 8px outset green; 
} 

JS Fiddle demo。