使用CSS的图像内边框？

Question

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

见图:

Answer 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 */
}