偏移图像上的边框

Question

我正在尝试创建与下图中显示的完全相同的内容.我也尝试过使用outline和offset方法的其他方法,但是我无法弄清楚如何继续这样做.

这是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

使用内联块包装图像,并将绝对定位的伪元素设置为边框:

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>

Answer 2

一种更简单的方法是使用边框,轮廓和负轮廓偏移的组合.这是一个例子:

img{
  outline:4px solid #77B244;
  outline-offset:-100px;
  border:50px solid transparent;
  border-width:150px 50px 50px 150px;
  margin:-75px 0 0 -75px;
}

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

这可以防止使用父元素和伪元素.