如何在html中为框创建内边框？

Question

如何在html中为框创建内部边框？

看这张图:

Answer 1

看看这个,我们可以简单地用outline-offset属性做这个

输出图像看起来像

.black_box {
    width:500px;
    height:200px;
    background:#000;
    float:left;
    border:2px solid #000;
    outline: 1px dashed #fff;
    outline-offset: -10px;
}

<div class="black_box"></div>

Answer 2

1. 使用dashed边框样式作为轮廓。
2. background-color使用:before或:after伪元素绘制。

注意：此方法将使您获得最大的浏览器支持。

输出图像：

* {box-sizing: border-box;}

.box {
  border: 1px dashed #fff;
  position: relative;
  height: 160px;
  width: 350px;
  margin: 20px;
}

.box:before {
  position: absolute;
  background: black;
  content: '';
  bottom: -10px;
  right: -10px;
  left: -10px;
  top: -10px;
  z-index: -1;
}

<div class="box">

</div>

Answer 3

网页：

<div class="outerDiv">
    <div class="innerDiv">Content</div>
</div>

CSS：

.outerDiv{
    background: #000;
    padding: 10px;
 }

 .innerDiv{
     border: 2px dashed #fff;
     min-height: 200px; //adding min-height as there is no content inside

 }