内部边框与CSS的图像？ [英] Inner border over images with CSS?

问题描述

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

I would like to add a white border over all my images in my content div using css. Images in the header and footer div areas should not be affected. how do I achieve this? See example image below. There are images of different sizes on the web pages.

查看图片：

推荐答案

具有额外元素或伪元素：

You can do this without having an extra element or pseudo element:

http://cssdeck.com/labs / t6nd0h9p

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

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

IE9&10 do not support the outline-offset property, but otherwise support is good: http://caniuse.com/#search=outline

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

Alternate solution that doesn't require knowing the dimensions of the image:

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

这篇关于内部边框与CSS的图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！