Question

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

Image example of effect

Answer 1

以下是工作示例：

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

Answer 2

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

.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的重叠边框绘制到不同大小的图像上

2 个答案: