<div>元素的“内联”边框

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 周围画出白色边框？这个边框应该是盒子内部的几个像素。我很确定我见过类似的东西，但我错了吗？那么我该怎么做呢？

- Stefan Meyer

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>

- Tyler Roper

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>

- j08691

Answer 3

Check this solution.

.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>

检查这个解决方案。

- dheeraj Kumar

Answer 4

另一个选项是使用多个box-shadow。

.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>

- Turnip

Answer 5

您也可以使用: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>

- Nenad Vracar