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

【问题标题】：How to add offset border to image of unknown size?如何为未知大小的图像添加偏移边框？
【发布时间】：2016-09-25 02:15:06
【问题描述】：

我正在尝试设计这种效果：

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

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

谢谢！

【问题讨论】：

标签： css image border

【解决方案1】：

如果图像放置在纯色背景上，您可以使用 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/

【讨论】：

【解决方案2】：

你可以使用伪类来做到这一点：

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

【讨论】：

谢谢！似乎将外部 div 设置为 display:inline-block 是我缺少的部分。谢谢！

【解决方案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;
}

【讨论】：