＆＃34;串联＆＃34; div的边界

Question

这就是我要归档的内容：

这是我的代码：

＆＃13;

＆＃13;

any_expr

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

如何在div周围画出白色边框？此边框应该是框内的一些像素。我很确定我见过类似的东西，或者我错了，这是不可能的？那我该怎么办呢？

Answer 1

您可以使用outline，其在正常border之外的外部绘制。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以在div上设置白色边框，然后使用box-shadow属性来提供第二个外边框

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

检查此解决方案。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

检查此解决方案。

Answer 4

另一种选择是使用多个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 5

您还可以使用:after伪元素创建边框。

＆＃13;

＆＃13;

.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: '';
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;