偏移图像上的边框

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

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

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

更简单的方法是使用边框、轮廓和负号outline-offset 的组合。这是一个例子：

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">

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

Answer 3

另一种可能性是将图像包装在具有边框的div 元素内，并将容器内的图像向左和底部移动。

来自Documentation：

相对定位的元素是计算position 值为relative 的元素。 top 和 bottom 属性指定与其正常位置的垂直偏移； left 和 right 属性指定水平偏移量。

我们需要将img 包裹在像div 这样的元素中，即：

<div class="image-holder">
  <img src="https://image.ibb.co/cxwWPa/services_gas_oil.jpg" >
</div>

我们将border 应用到容器并使用以下 CSS 将图像从其正常位置移动：

.image-holder img {
  position: relative;
  z-index: -1;
  left: 40px;
  top: 40px;
}

.image-holder {
  border: 7px solid #76af46;
  display: inline-block;
  vertical-align: top;
}

.image-holder img {
  position: relative;
  z-index: -1;
  left: 40px;
  top: 40px;
}

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

---

或者，我们也可以使用 CSS3 translate()。

.image-holder img {
  transform: translate(40px, 40px);
  position: relative;
  z-index: -1;
}

.image-holder {
  border: 7px solid #76af46;
  display: inline-block;
  vertical-align: top;
}

.image-holder img {
  transform: translate(40px, 40px);
  position: relative;
  z-index: -1;
}

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