偏移图像上的边框

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

使用内联块包裹图像，并将绝对定位的伪元素设置为边框：

＆＃13;

＆＃13;

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: '';
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

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;
}

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

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

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;