如何在不改变图像大小的情况下制作粗边框 OVER 图像答案

【问题标题】：How to make thick border OVER image without changing the image size如何在不改变图像大小的情况下制作粗边框 OVER 图像
【发布时间】：2021-06-13 04:25:55
【问题描述】：

问题是我需要类似 Photoshop 的选择功能。但是当我为包含图像的 div 添加边框时，图像会变小边框 x2 的厚度。

我该如何解决？

我试过了

.picture-frame--image {
    border: 5px solid red;
  margin: -2px 0 0 -2px;
}

<div>
<img class="picture-frame--image" src="https://placehold.it/500x500">
</div>

<div>
<img src="https://placehold.it/500x500">
</div>

但是图像是重叠的边框，我需要其他的。由于某种原因，z-index 不起作用，我不知道为什么。

【问题讨论】：

你尝试过大纲吗？
您好，请在此处发布您的代码，以便您的问题可以重现和解决。您是否尝试过轮廓而不是边框？轮廓不占用容器上的空间，因此应该可以工作并且不会减少图像尺寸。您可能需要在 div 上隐藏溢出，以便轮廓不会超出图像的边缘。
这里有一些好主意：stackoverflow.com/questions/19159977/…outline-offset 是轮廓宽度的负值。所以轮廓 5px 使用 -5 的轮廓偏移量。
感谢 Nathaniel，轮廓偏移 -2px 帮助

标签： html css

【解决方案1】：

最好的答案是 cimmanon 在 nathaniel 链接中提出的。

我做了：

img {
  outline: 2px dashed violet;
  outline-offset: -2px;
}

谢谢大家的回答。真的很欣赏。

【讨论】：

【解决方案2】：

我认为您正在寻找的是伪元素，例如 ::after 和 ::before。有了这些，您可以在元素周围添加内容。但请注意，这些只能应用于某些 html 标签。 ::after MDN Documentation

看到这个StackBlitz

【讨论】：

【解决方案3】：

听起来你需要添加

* {
    box-sizing: border-box;
}

到您的 css 文件。我不完全确定，因为您没有发布任何代码。查看此网站了解更多信息：https://www.w3schools.com/css/css3_box-sizing.asp

【讨论】：