“内联” 边境

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>

检查这个解决方案。