HTML5实践 -

下一站永远

<div id="cnblogs_post_body">　　转载请注明原创地址：http://www.cnblogs.com/softlover/archive/2012/11/22/2779876.html

　　在css3中，直接在图片上使用box-shadow 和 border-radius，浏览器并不能很好的渲染。但是如果把图片作为background-image，添加的样式浏览器可以很好的渲染。我将会介绍如何使用box-shadow, border-radius 和 transition创建不同图片样式效果。
　　demo预览地址：http://webdesignerwall.com/demo/css3-image-styles/

　　问题

　　通过查看demo能注意到，我们为第一行图片设置了border-radius 和 内嵌box-shadow。firefox渲染了图片的border-radius，但是没有渲染内嵌box-shadow。chrome和Safari两种效果都没有渲染。
<div class="cnblogs_code">.normal img {　　border: solid 5px #000;　　-webkit-border-radius: 20px;　　-moz-border-radius: 20px;　　border-radius: 20px;　　-webkit-box-shadow: inset 0 1px 5px rgba(0,0,0,.5);　　-moz-box-shadow: inset 0 1px 5px rgba(0,0,0,.5);　　box-shadow: inset 0 1px 5px rgba(0,0,0,.5);}