如何创建边框偏移？

Question

嗨，我想知道如何从 div 偏移边框，例如图像：

所以灰色边框与图像大小相同，只是它偏移到了右上角。这是我的标记：

<figure class="col-md-10 col-md-offset-1">
        <img src="images/image.jpg" alt="Image">
        <figcaption>
            <p>
            Praesent at luctus erat, non finibus justo. 
            <a href="#">share</a>
            </p>
        </figcaption>
</figure><!-- End figure.col-md-10 -->

Answer 1

使用伪元素非常简单。

例子

div {
  position: relative;
  margin: 50px 0 0 50px;
  display: inline-block;
}
img {
  display: block;
}
div::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border: 2px solid gray;
  left: 30px;
  top: -30px;
  z-index: -1;
}

<div>
  <img src="http://placehold.it/350x150" alt="">
</div>