如何实现边框置于图片内部的CSS效果？

要让边框显示在图片内部（而非外层容器的边框），同时用红色背景标注边框范围，给你两个可行方案：

方案一：直接给图片加边框并限制尺寸 #

把边框直接加在<img>标签上，配合box-sizing: border-box让边框占用图片自身的宽度，这样边框就不会向外扩展，而是内嵌在图片范围内：

#example {
  background: red; /* 仅用于显示边框区域 */
  width: 600px;
}

img {
  width: 100%;
  height: auto;
  border: 50px dotted black;
  box-sizing: border-box; /* 边框算进图片宽度，不额外占空间 */
}

<div id="example">
  <img src="https://images.pexels.com/photos/2246476/pexels-photo-2246476.jpeg?auto=compress&cs=tinysrgb&w=1600">
</div>

方案二：用容器背景裁剪实现 #

如果要保留外层容器的结构，可通过background-clip让容器背景只显示在内容区域，边框区域透出来，视觉上就是边框内嵌在图片上：

#example {
  border: 50px dotted black;
  background: red;
  width: 600px;
  box-sizing: border-box;
  background-clip: content-box; /* 背景只在内容区显示，边框处露空 */
}

img {
  width: 100%;
  height: auto;
}

<div id="example">
  <img src="https://images.pexels.com/photos/2246476/pexels-photo-2246476.jpeg?auto=compress&cs=tinysrgb&w=1600">
</div>

这两种方法都能达到你要的效果，红色背景会清晰展示边框和图片的位置关系。

内容的提问来源于stack exchange，提问作者user20337375