「內聯」 邊境

Question

這是我要存檔的內容：

這是我的代碼：

.mybox { 
 
    width: 200px; 
 
    height: 60px; 
 
    background-color: #00483b; 
 
    /* ... and other simple stuff border: THIS IS MY PROBLEM */ 
 
}

<div class="mybox">Text Inside</div>

我怎樣繪製我的div周圍有白色邊框？這個邊框應該是框內的一些像素。我很確定我看到過這樣的事情，或者我錯了，那是不可能的？我應該如何繼續？

Answer 1

您可以使用outline，它在正常border的之外繪製額外的邊界。

.mybox { 
 
    width: 200px; 
 
    height: 60px; 
 
    background-color: #00483b; 
 
    border: 1px solid white; 
 
    outline: 3px solid #00483b; 
 
}

<div class="mybox">Text Inside</div>

Answer 2

您可以在DIV設置白色邊框，然後使用box-shadow屬性給第二外邊框

.mybox { 
 
    width: 200px; 
 
    height: 60px; 
 
    background-color: #00483b; 
 
    border:1px solid white; 
 
    box-shadow: 0 0 0 3px #00483b; 
 
}

<div class="mybox">Text Inside</div>

Answer 3

另一個選項是使用多個box-shadow s

.mybox { 
 
    width: 200px; 
 
    height: 60px; 
 
    background-color: #00483b; 
 
    box-shadow: 0 0 0 1px #fff, 0 0 0 4px #00483b; 
 
}

<div class="mybox">Text Inside</div>

Answer 4

您還可以使用:after僞元素創建邊框。

.mybox { 
 
    background: #00483B; 
 
    padding: 20px 45px; 
 
    text-align: center; 
 
    display: inline-block; 
 
    color: white; 
 
    position: relative; 
 
} 
 
.mybox:after { 
 
    position: absolute; 
 
    width: calc(100% - 10px); 
 
    height: calc(100% - 10px); 
 
    transform: translate(-50%, -50%); 
 
    border: 1px solid white; 
 
    top: 50%; 
 
    left: 50%; 
 
    content: ''; 
 
}

<div class="mybox">Text Inside</div>

Answer 5

檢查這個解決方案。

.mybox { 
 
    width: 200px; 
 
    height: 60px; 
 
    background-color: #00483b; 
 
    border: 1px solid #fff; 
 
    outline: 3px solid #00483b; 
 
    color: #fff; 
 
    text-align:center; 
 
    vertical-align:middle; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    font-weight:600; 
 
    letter-spacing:1px; 
 
    
 
}

<div class="mybox">Text Inside</div>

檢查這個解決方案。