有没有办法去除div的边界？ [重复]

Question

这个问题在这里已有答案：

• Make border overlay child div 1回答
• How to create a box shadow that is just an outline? 1回答

我正在尝试实现这种设计，其中我的网站的某些类的每个div显示边界类型从图像中看到的div的实际内容（下面的链接）中去掉。有没有办法用css实现这个目标？

Answer 1

如果你知道高度和宽度，你可以尝试这个：http://jsfiddle.net/9yvd68az/

HTML：

<div class="img-container">
  <img src="https://i.imgur.com/uj0yKZZ.png"/>
</div>

CSS：

.img-container{
  display: inline-block;
  border: 2px solid blue;
  height: 220px;
  width: 220px;
}

.img-container img{
  margin-left: 5px;
  margin-top: 5px;
}

Answer 2

使用伪代码可以带来预期的效果。

.dephased {
  padding: 10px;
  position: relative;
  display: inline-block;
}

.dephased:before {
  content: "";
  position: absolute;
  border: 3px solid blue;
  top: -5px;
  left: -5px;
  width: 90%;
  height: 90%;
  z-index: -1;
}

<div class="dephased"><img src="https://via.placeholder.com/200x300"></div>