html - 偏移图像的边框

Question

我正在尝试创建与下图所示完全相同的内容。我也尝试过使用轮廓和偏移方法的其他方法，但我不知道如何继续这样做。

这是 JSFiddle :

img {
  border: 4px solid green;
}

<img src="https://image.ibb.co/cxwWPa/services_gas_oil.jpg" alt="services_gas_oil" border="0">

如何在图像上获得偏移边框？

Answer 1

用行内 block 包裹图片，并设置一个绝对定位的伪元素作为边框:

body {
  padding: 50px 0 0 80px;
}

.imageContainer {
  display: inline-block;
  position: relative;
}

.imageContainer::before {
  position: absolute;
  top: -5%;
  left: -15%;
  width: 100%;
  height: 100%;
  border: 4px solid #77B244;
  content: '';
}

<div class="imageContainer">
  <img src="https://cdn.pixabay.com/photo/2013/07/31/12/25/cat-169095_960_720.jpg" alt="services_gas_oil" border="0">
</div>