使用CSS的图像内边框？

Posted 2023-03-06

【中文标题】使用CSS的图像内边框？

【英文标题】：Inner border over images with CSS?

【发布时间】：2013-10-10 04:44:51

【问题描述】：

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

看图：

【问题讨论】：

见这里：***.com/questions/9051228/css-inner-border 以及您想要的工作解决方案：jsfiddle.net/ThinkingStiff/bNmzB

@EricHotinger 这些答案只适用于坚实的“背景”，而不是模式。

@cimmanon - 他没有扎实的背景吗？我没有看到任何模式。

@EricHotinger 图片本身就是一种模式。使用实际图像尝试您的演示，看看它不起作用。

@cimmanon 我链接的帖子有另一个答案，它也使用背景图像......我选择了一个答案，其中一个 JSFiddle 代表他拥有的相同的白色内边框。

【参考方案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