在图像内部（和上方）有一个像素的图像周围设置边框的最简单方法是什么？答案

【问题标题】：What's the easiest way to have a border around an image with one pixel inside (and above) the image?在图像内部（和上方）有一个像素的图像周围设置边框的最简单方法是什么？
【发布时间】：2017-03-17 08:16:41
【问题描述】：

我有一个方形图像，看起来是圆形的，border-radius 为 50%。我想在这个图像周围应用一个 10px 厚的边框，但不是让边框在图像边缘“开始”，我希望它在图像边缘内“开始”1 个像素，这意味着 1px 的上轮廓图像将隐藏在边框下方。

实现这种效果的最简单方法是什么？我尝试使用box-shadow，但没有取得多大成功。

【问题讨论】：

你能把你现在拥有的代码的 JSFiddle 贴出来吗？
请发布一些代码，但当您可以在 SO 上包含您的代码时，请不要发布 jsfiddle。不建议将您的代码放在第三方网站上，因为您可以轻松地将其包含在 SO 上。

标签： css

【解决方案1】：

我认为以下 CSS 可以：

#MyImage{
  display:block;
  border:10px solid black;
  box-shadow:0px 1px 1px black inset;
}

这里有一个jsFiddle，用夸张的尺寸来展示这个概念。

就我个人而言，我会在 Photoshop 或同等软件中重新制作图像，并在图像编辑器中添加您想要的边框。

【讨论】：

谢谢，但这不会创建 1px 的内边框。它创建了它的一部分，比如一个半圆。
你能贴一张最终结果的图片吗？我仍然建议您离线处理图像，而不是使用 CSS。

【解决方案2】：

您可以将图像放入一个DIV，您可以在其中应用所需的大小、边框和边框半径。

然后将height: calc(100% + 1px); width: auto;（或相反）和margin-top: -1px; margin-left: -1px 应用于图像本身。（你可能会增加一到两个像素 - 试试看起来更好的）

并确保将overflow: hidden 应用于父元素以真正切断额外的像素..

【讨论】：