如何为未知大小的图像添加偏移边框？

Question

我试图设计这种效果：

如何使用css完成这项工作？图像尺寸未知，我希望绿色框与图像尺寸相同但偏移？

我无法获得任何解决方案，除了使用javascript调整绿色框的大小，但我认为必须有一个css解决方案？

谢谢！

Answer 1

您可以使用伪类来执行此操作：

.imgContainer{
  position:relative;
  display:inline-block;
}
.imgContainer:before{
  content:'';
  border:1px solid green;
  position:absolute;
  width:100%;
  height:100%;
  top:10%;
  left:10%;
  z-index:-1;
}

<div class="imgContainer">
  <img src="https://www.nasa.gov/sites/default/files/styles/image_card_4x3_ratio/public/thumbnails/image/pia18351-1041.jpg?itok=TyivXWrM">
</div>

Answer 2

如果图像放在纯色背景上，您可以使用box-shadow实现此目的。将第一个阴影设置为与背景颜色相同，其他阴影设置为所需边框的颜色。

img { box-shadow: 29px 29px 0 white,  31px 31px 0 green, 31px 27px 0 green, 27px 31px 0 green; }

这里是小提琴https://jsfiddle.net/2dqzm45e/2/

Answer 3

如果您需要透明背景，则可以创建使用pseudo element。

的图像类

.left-shadow,
.right-shadow {
    // Image rules
}

.left-shadow::before,
.right-shadow::before {
    content: '';
    height: 100%;
    width: 100%;
    position: absolute;
    top: 20px;
    border: 2px solid green;
}

.left-shadow::before {
    left: 20px;
}

.right-shadow::before {
    right: 20px;
}