是否可以在CSS中創建雙邊框？

我試圖依靠CSS來創建導航菜單欄的雙邊框，其中頂部有雙邊框，底部有雙邊框。我還希望兩行有1px的陰影來創建嵌入式外觀。是否可以在CSS中創建雙邊框？

enter image description here

如何做到這一點使用CSS？

2012-04-23 Daphne

看到這個http://stackoverflow.com/questions/5753351/how-在線製作雙線邊框在CSS中每行不同顏色無-u – 2012-04-23 07:44:47

@JitendraVya這有點不同，因爲兩條線彼此重疊。我想要兩條線在圖像之間有一個空間，我不確定如何在陰影和邊框之間製作填充/邊距。 – Daphne 2012-04-23 08:20:21

怎麼了？

border-top: 3px #000 double; 
border-bottom: 3px #000 double;

來源

2012-04-23 07:42:45 Starx

@ F.Calderan我試過這個，但是可以確定兩行之間的高度併爲所有行創建1px的陰影？ – Daphne 2012-04-23 08:26:45

@Daphne，您可以使用嵌套元素來模擬效果，然後填充。 – Starx 2012-04-23 08:29:38

您可以使用:after屬性爲此。像這樣寫：

CSS

div{ 
    height:30px; 
    position:relative; 
    border-top:1px solid green; 
    border-bottom:1px solid green; 
    margin:10px; 
} 
div:after{ 
    content:''; 
    position:absolute; 
    top:-3px; 
    bottom:-3px; 
    left:0; 
    right:0; 
    border-top:1px solid green; 
    border-bottom:1px solid green; 
}

HTML

<div></div>

入住這http://jsfiddle.net/ECFBR/8/

來源

2012-04-23 07:46:37 sandeep

謝謝！這很好。我想知道是否有可能爲所有邊界添加陰影？我已經對兩個div元素（div和div：after）應用了陰影框，但只有底部的兩個邊框顯示陰影。 – Daphne 2012-04-23 09:26:34

你也可以通過雙邊框屬性來實現這一點也檢查這個http://jsfiddle.net/ECFBR/9/ – sandeep 2012-04-23 09:27:56

雙邊框的工作，但問題是，它不允許你調整雙邊界（如第一條邊界線和第二條邊界線）。如果您嘗試應用箱形陰影，它也只適用於底線。 – Daphne 2012-04-24 05:33:06

是否可以在CSS中創建雙邊框？

回答

相關問題