使用 CSS 在不同大小的图像上绘制重叠边框答案

【问题标题】：Draw overlapping border with CSS onto varying size images使用 CSS 在不同大小的图像上绘制重叠边框
【发布时间】：2017-05-07 05:38:32
【问题描述】：

我希望通过 CSS 作为类标签在我的图像上创建边框。理想情况下，它看起来像下面包含的示例，其中每条边界线（顶部、右侧、底部和左侧）从图像边缘偏移 -0.75 rem（或任何固定长度），重叠以在图像内部创建一个框架.它需要处理不同尺寸和方向的图像，以在整个站点上生成一致的外观框架。关于如何做到这一点的任何想法？是否可以仅通过 CSS 完成？

Image example of effect

【问题讨论】：

标签： html image css border

【解决方案1】：

您可以用<div> 包裹<img> 标签，并使用div 的::before 和::after 伪元素来绘制边框。由于display: inline-block，<div> 元素大小将适合内部图像。

.imageFrame {
  display: inline-block;
  position: relative;
  font-size: 0; /** required to remove white space **/
}

.imageFrame::before, .imageFrame::after {
  position: absolute;
  border-style: solid;
  border-color: yellow;
  content: '';
}

.imageFrame::before {
  top: 5px;
  right: 0;
  bottom: 5px;
  left: 0;
  border-width: 2px 0 2px 0;
}

.imageFrame::after {
  top: 0;
  right: 5px;
  bottom: 0;
  left: 5px;
  border-width: 0 2px 0 2px;
}

.smaller {
  width: 300px;
  height: 200px;
}

<div class="imageFrame">
  <img src="https://pbs.twimg.com/profile_images/625769159339737088/2dwpQAXA.jpg">
</div>

<div class="imageFrame">
  <img src="https://s-media-cache-ak0.pinimg.com/236x/6f/7a/bb/6f7abbd4d03bf30068cdec219a29a1a9.jpg">
</div>

<div class="imageFrame">
  <img class="smaller" src="https://www.petfinder.com/wp-content/uploads/2013/09/cat-black-superstitious-fcs-cat-myths-162286659.jpg">
</div>

【讨论】：

我喜欢这个！如果图像更大并且需要通过 css 调整移动显示的大小，图像是否会保持效果？
包装 div 将适合自己包装的 img 标签的尺寸。看看我添加的第三个例子（黑猫）。
谢谢！这正是我想要的；我真的很感谢你的努力！是的，它在响应式/流体图像上完美运行
欢迎 :) 这是一个有趣的问题。

【解决方案2】：

这是一个工作示例：

.container{
  width:200px;
  height:160px;
  background-image:url('http://www.chinabuddhismencyclopedia.com/en/images/thumb/b/b8/Nature.jpg/240px-Nature.jpg');
  bacground-size:cover;
  box-sizing:border-box;
  padding:10px;
}
.innerOne{
  width:100%;
  height:100%;
  border:1px solid white;
}

<div class="container">
  <div class="innerOne">
    </div>
</div>

【讨论】：

边界不会像我们想要的那样重叠。