有没有一种方法可以使div的边界移相？

Question

我正在尝试实现这种设计，在该设计中，网站的某些类别的每个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>