css – 使用box-sizing：“border-box”并保持图像尺寸
作者：互联网
2026-04-08
HTML教程
如果我使用box-sizing：图像的“border-box”图像将变小,例如悬停： Example JsFiddle
是否可以在没有图像裁剪的情况下执行相同的效果？
解决方案#1大纲属性.尝试使用轮廓而不是边框,负 outline-offset值等于轮廓宽度：img:hover { box-sizing:border-box; outline: solid 10px #f80; outline-offset: -10px;} http://jsfiddle.net/dfsq/BPRyZ/2/
此外,由于IE不了解此属性,您可以将盒子大小调整为IE8使用.
解决方案#2使用div作为包装器：之后：
CSS：
.img-wrap:after { border: 0;}.img-wrap:hover:after { content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; border: solid 10px #f80;} http://jsfiddle.net/dfsq/BPRyZ/7/
相关推荐
