首页
-
代码
2013-11-30 22:22:00 -0500
★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="http://35230.wodemo.com/entry/176382/49a6af58595cb57f2296fc8bae5eb288/njjj.jpg"/>
代码演示
点一下图片看看
[代码仅供参考，转载请注明出处]
----Comments(1)----
迷茫者的微笑 (@1044529113)
|
@
at 2014-02-11 07:45:
不错
Comment:
Name:
Subscribe
|
Register
|
Login
|
N
