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);}
页:
[1]