微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

内部边框超图像CSS?

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

查看图片

解决方法

你可以做到这一点,而不需要额外的元素或伪元素:

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。