直接在图片元素上直接应用CSS3 inset box-shadow 或 border-radius时，浏览器并不能完美的渲染它们。不过，如果把这个图片用作背景图，你就可以可以给它添加任何样式了，浏览器也会很好地渲染。Darcy Clarke和我做了一个简单的教程，讲解如何使用jQuery来动态地制作完美的圆角图片。今天我将重温这个主题然后向你展示使用background-image的方法可以实现多少效果。我将向你展示如何使用box-shadow、border-radius 和 transition 来创作不同的图片风格。

先看下demo

问题 (见 demo)

看一下demo，请注意在第一行的图片中使用了border-radius和inset box-shadow。Firefox会直接在图片元素上渲染border-radius，但不会渲染inset box-shadow。chrome/safari则两者都不渲染。

解决方案

要让 border-radius 和 inset box-shadow 正常工作，解决方案就是将实际图片变作background-image.

动态方法

要想动态实现，可以简单的使用jQuery为每个图片元素外面包一个背景图片。下面的jQuery代码会将所有图片外面包一个span标签然后将图片用作其背景图片(jQuery代码由Darcy Clarke编写)。

1 2 3 4 5 6 7 8 9 10 11 12 13 ><> $(document).ready(function(){ $("img").load(function() { $(this).wrap(function(){ return ' >'; }); $(this).css("opacity","0"); }); }); </script>

输出

上面的脚本将会输出下面的HTML代码：

1 2 3 > > </span>

圆形图片(见 demo)

现在，图片被用作背景图了，你可以给它添加任意你想要的样式上去。下面是一个简单的使用border-radius实现的圆形图片。如果你对CSS3不太了解，可以阅读下Basics of CSS3，也可以搜索一下前端观察。

CSS

1 2 3 4 5 .-webkit-border-radius-moz-border-radiusborder-radius

卡片风格(见 demo)

下面是一个像卡片的图片风格，用了多个inset box-shadow。

CSS

1 2 3 4 5 6 7 8 9 -webkit-box-shadowrgba.8rgba.5rgba.4); -moz-box-shadowrgba.8rgba.5rgba.4); box-shadowrgba.8rgba.5rgba.4); -webkit-border-radius-moz-border-radiusborder-radius

浮雕风格 (见 demo)

通过一点儿改变，我可以将卡片风格转换为浮雕。。。

CSS

1 2 3 4 5 6 7 8 9 -webkit-box-shadowrgba.8rgba.5rgba.6rgba.3); -moz-box-shadowrgba.8rgba.5rgba.6rgba.3); box-shadowrgba.8rgba.5rgba.6rgba.3); -webkit-border-radius-moz-border-radiusborder-radius

软浮雕风格 (见 demo)

和浮雕风格真的很像，我只是加了1px的虚化～～

CSS

1 2 3 4 5 6 7 8 9 -webkit-box-shadowrgbargba.5rgba.6rgba.3); -moz-box-shadowrgbargba.5rgba.6rgba.3); box-shadowrgbargba.5rgba.6rgba.3); -webkit-border-radius-moz-border-radiusborder-radius

剪贴画风格(见 demo)

同样只是inset box-shadow，我可以让它看起来像剪贴画。

CSS

1 2 3 4 5 6 7 8 9 -webkit-box-shadowrgba.2rgba.6rgba.6); -moz-box-shadowrgba.2rgba.6rgba.6); box-shadowrgba.2rgba.6rgba.6); -webkit-border-radius-moz-border-radiusborder-radius

变形和发光 (见 demo)

这个例子中，我为图片外容器增加了变形。mouseover的时候，它将从圆角形状变为圆形，然后增加了发光效果。发光效果通过多重box-shadow实现。

CSS

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 -webkit-transition: 1s; -moz-transition: 1s; transition: 1s; -webkit-border-radius-moz-border-radiusborder-radius-webkit-box-shadowrgba.6rgba-moz-box-shadowrgba.6rgbabox-shadowrgba.6rgba-webkit-border-radius-moz-border-radiusborder-radius

发光遮罩 (见 demo)

发光渐变遮罩是通过:after伪元素实现的。。。

CSS

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 -webkit-box-shadowrgba.5); -moz-box-shadowrgba.5); box-shadowrgba.5); -webkit-border-radius-moz-border-radiusborder-radius-webkit-border-radius-moz-border-radiusborder-radius-moz-linear-gradientrgbargba.1-webkit-gradientcolor-stoprgbacolor-stoprgba.1linear-gradientrgbargba.1

倒影 (见 demo)

这个例子中，我将遮罩渐变移动到底部，于是它就成了倒影。。。

CSS