使用CSS的图像内边框？答案

【问题标题】：Inner border over images with CSS?使用CSS的图像内边框？
【发布时间】：2025-12-10 17:50:02
【问题描述】：

我想使用 css 在我的内容 div 中的所有图像上添加一个白色边框。页眉和页脚 div 区域中的图像不应受到影响。我该如何做到这一点？请参见下面的示例图像。网页上有不同大小的图像。

看图：

【问题讨论】：

见这里：*.com/questions/9051228/css-inner-border 以及您想要的工作解决方案：jsfiddle.net/ThinkingStiff/bNmzB
@EricHotinger 这些答案只适用于坚实的“背景”，而不是模式。
@cimmanon - 他没有扎实的背景吗？我没有看到任何模式。
@EricHotinger 图片本身就是一种模式。使用实际图像尝试您的演示，看看它不起作用。
@cimmanon 我链接的帖子有另一个答案，它也使用背景图像......我选择了一个答案，其中一个 JSFiddle 代表他拥有的相同的白色内边框。

标签： css image border

【解决方案1】：

你可以在没有额外元素或伪元素的情况下做到这一点：

http://cssdeck.com/labs/t6nd0h9p

img {
  outline: 1px solid white;
  outline-offset: -4px;
}

IE9&10不支持outline-offset属性，其他支持好：http://caniuse.com/#search=outline

不需要知道图像尺寸的替代解决方案：

http://cssdeck.com/labs/aajakwnl

<div class="ie-container"><img src="http://placekitten.com/200/200" /></div>

div.ie-container {
  display: inline-block;
  position: relative;
}

div.ie-container:before {
  display: block;
  content: '';
  position: absolute;
  top: 4px;
  right: 4px;
  bottom: 4px;
  left: 4px;
  border: 1px solid white;
}

img {
  vertical-align: middle; /* optional */
}

【讨论】：

我喜欢这个，尽管存在向后兼容性问题。不错。
这将是我的首选，但我们内部主要有 Internet Explorer。有没有其他选择，例如使用 JavaScript？其他示例似乎都要求您指定图像大小。我希望它自动应用于所有图像。
这可能是一个更好的新问题。本质上，您需要做其他答案正在做的事情：动态创建一个额外的元素并将边框应用于该元素。我添加了一个替代解决方案，它使用一个附加元素并且不需要知道图像的尺寸。如果是我，我不会费尽心思去支持那些浏览器，因为这只是一个小小的装饰效果。

【解决方案2】：

你可以试试这个：

HTML：

<div class="image">
  <div class="innerdiv">

  </div>
</div>

CSS：

.image
{
    width: 325px;
    height: 239px;
    background: url("https://i.picsum.photos/id/214/325/239.jpg?hmac=7XH4Bp-G9XhpuKz5vkgES71GyXKS3ytp-pXCt_zpzE4") 0 0 no-repeat;
    background-size: cover;
    padding: 10px;
}

.innerdiv
{
  border: 1px solid white;
  height:100%;
  width: 100%;
}

jsFiddle

希望这就是你的意思:)

【讨论】：

jsFiddle 坏了。固定版本位于 jsfiddle.net/089vtcfx 。我注意到，在 Firefox 87.0 中，效果不是 OP 想要的。
@Éric 这是一个旧答案:) 你是对的。添加background-size: cover; 应该可以解决这个问题。见jsfiddle.net/zhs57eyg

【解决方案3】：

无论 div ID 或类是什么，您都可以简单地添加

#yourDivIDExample {
...
}

#yourDivIDExample img{
border:1px solid #ffffff;
}

这将在 div 本身的图像周围创建一个边框.. 同样适用于类或全局规则..

img {
border:1px solid #ffffff;
}

【讨论】：

【解决方案4】：

你可以这样做DEMO

HTML

<div class="imgborder">
   <div class="in-imgborder">

    </div>
</div>

CSS

.imgborder {
    width: 300px;
    height: 300px;
    position: relative;
    background: url(http://placekitten.com/300/300) no-repeat;
}
.in-imgborder {
    width: 290px;
    height: 290px;
    position: absolute;
    top: 4px;
    left: 4px;
    border: 1px solid red;
}

【讨论】：

【解决方案5】：

我用box-shadow: inset 和works with IE11 and up 解决了这个问题。我想在图像周围的角落有一个边框，但这个例子有边框10px inset。它需要带有:before 或:after 元素的父div，但处理得很好。

.image {
    width: 100%;
    height: auto;
}

.image__wrapper {
    position: relative;
}

.image__wrapper:before {
  content: '';
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 10px;
  right: 10px;
  box-shadow: inset 0 0 0 3px red;
}

CodePen Demo

【讨论】：