使用CSS的图像内边框？

Question

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

见图片：

Answer 1

您可以在没有额外元素或伪元素的情况下执行此操作：

http://cssdeck.com/labs/t6nd0h9p

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

IE9＆amp; 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 */
}

Answer 2

你可以试试这个：

HTML：

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

  </div>
</div>

的CSS：

.image
{
  width: 325px;
  height: 239px;
  background:url(http://www.modernvice.com/files/images/backgrounds/_Zoom/black-pony.jpg) 0 0 no-repeat;
  padding: 10px;
}

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

<强> jsFiddle

希望这就是你的意思:)。

Answer 3

无论div ID或类是什么，您只需添加

即可

#yourDivIDExample {
...
}

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

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

img {
border:1px solid #ffffff;
}

Answer 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;
}

Answer 5

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

.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