CSS鼠标悬停图片加边框效果，不位移的方法

此代码仅供参考

---

代码说明

CSS给图片Hover加边框，不位移的方法，当鼠标滑过图片时，图片出现用CSS定义的外框，但很多时候，加了边框后，图片要产生位移，影响整体效果，本例的三种方法，会让您明白，如何在加边框后不位移的方法。

---

CSS代码

<style type="text/css"> body{background:#222;color:#06c} em{font-style:inherit} img{margin:0 5px;width:70px;height:70px;background:white} img:hover{border:1px red solid} .demo2 img{border:1px solid transparent} .demo2 img:hover{border:1px red solid} .demo3 img:hover{width:68px;height:68px;border:1px solid yellow} </style> <div class="demo1"> <img src="图片地址" /> </div> <div class="demo2"> <img src="图片地址" /> </div> <div class="demo3"> <img src="图片地址" /> </div>

---

代码演示

---

---