CSS实现图片圆角框架阴影效果(box-shadow属性盒子)

此代码仅供参考

---

代码说明

又一个CSS3图片圆角阴影框效果，直接对img标签引用out-shadow类即可。圆角阴影+圆角边框，相当唯美。

---

html代码

<style type="text/css"> .out-shadow { width: 200px; height: 150px; vertical-align: bottom; margin-right:10px; padding:5px; border:1px solid #ccc; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; -webkit-box-shadow:0 0 5px rgba(0,0,0,0.2); -moz-box-shadow: 0 0 5px rgba(0,0,0,0.2); box-shadow: 0 0 5px rgba(0,0,0,0.2); -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; -ms-transition:all 0.3s ease; -o-transition:all 0.3s ease; transition:all 0.3s ease; } .out-shadow:hover { border:1px solid rgba(82, 168, 236, 0.6); -webkit-box-shadow:0 0 11px rgba(82, 16, 26, 0.6); -moz-box-shadow: 0 0 11px rgba(82, 16, 26, 0.6); box-shadow: 0 0 11px rgba(82, 16, 26, 0.6); } </style> <img class="out-shadow" src="图片网址.jpg"/>

---

代码演示

---

---