1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 -webkit-border-top-left-radius-webkit-border-top-right-radius-moz-border-radius-topleft-moz-border-radius-toprightborder-top-left-radiusborder-top-right-radius-moz-linear-gradientrgba.3rgba-webkit-gradientcolor-stoprgba.3color-stoprgbalinear-gradientrgba.3rgba

光泽和倒影(见 demo)

这个例子中，我同时使用了:before和: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 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 -webkit-box-shadowrgba.5rgba.6); -moz-box-shadowrgba.5rgba.6); box-shadowrgba.5rgba.6); -webkit-transition: 1s; -moz-transition: 1s; transition: 1s; -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-webkit-border-top-left-radius-webkit-border-top-right-radius-moz-border-radius-topleft-moz-border-radius-toprightborder-top-left-radiusborder-top-right-radius-moz-linear-gradientrgba.3rgba-webkit-gradientcolor-stoprgba.3color-stoprgbalinear-gradientrgba.3rgba

胶带风格(见 demo)

这里使用了:after伪元素来在图片顶部实现了胶带风格的渐变。

CSS

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 -webkit-box-shadowrgba.7rgba.3rgba.5rgba.4); -moz-box-shadowrgba.7rgba.3rgba.5rgba.4); box-shadowrgba.7rgba.3rgba.5rgba.4rgba.2-moz-linear-gradientrgba.6rgba.6-webkit-gradientcolor-stoprgba.6color-stoprgba.6linear-gradientrgba.6rgba.6-webkit-box-shadowrgba.3rgba.2

变形和着色 (见 demo)

在下面的这个例子中，我用了 :after元素来在mouseover的时候添加发光渐变。

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 27 28 29 30 31 32 33 34 35 36 37 38 -webkit-transition: 1s; -moz-transition: 1s; transition: 1s; -webkit-border-radius-moz-border-radiusborder-radius-webkit-border-radius-moz-border-radiusborder-radius-webkit-transition: 1s; -moz-transition: 1s; transition: 1s; -webkit-border-radius-moz-border-radiusborder-radius-webkit-gradientfromto-moz-radial-gradientrgbargba

羽化边缘的圆形(见demo)

发散渐变也可以用作遮罩层来实现圆形羽化效果。

CSS

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 -webkit-border-radius-moz-border-radiusborder-radius-webkit-gradientfromto-moz-radial-gradientrgbargba

浏览器支持

本文的方法可以在支持border-radius、box-shadow、:before和:after伪元素的浏览器上，比如Chrome/Safari/Firefox等，而在一些落后的浏览器比如IE9(包括IE9)则不能完全支持——IE6/7/8没有任何表现，IE9会有普通的圆角。

发挥你的创造力

正如你看到的，你几乎可以使用:before和:after伪元素实现任何效果。如果你有用CSS3实现更多的创意图片效果，欢迎通过评论与大家分享。

PS,本文中使用:before/:after来实现伪元素，其实我更建议使用双冒号来实现，虽然单冒号有更多的浏览器支持，但是对于这些CSS3实现的效果来说，双冒号更安全一些。