CSS3样式:box-shadow,border-radius和transition

直接在图片元素上直接应用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则两者都不渲染。

CSS3样式:box-shadow,border-radius和transition,PS教程,思缘教程网

解决方案

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

CSS3样式:box-shadow,border-radius和transition,PS教程,思缘教程网

动态方法

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

输出

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

圆形图片(见 demo)

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

CSS3样式:box-shadow,border-radius和transition,PS教程,思缘教程网

CSS

卡片风格(见 demo)

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

CSS3样式:box-shadow,border-radius和transition,PS教程,思缘教程网

CSS

浮雕风格 (见 demo)

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

CSS3样式:box-shadow,border-radius和transition,PS教程,思缘教程网

CSS

软浮雕风格 (见 demo)

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

CSS3样式:box-shadow,border-radius和transition,PS教程,思缘教程网

CSS

剪贴画风格(见 demo)

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

CSS3样式:box-shadow,border-radius和transition,PS教程,思缘教程网

CSS

变形和发光 (见 demo)

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

CSS3样式:box-shadow,border-radius和transition,PS教程,思缘教程网

CSS

发光遮罩 (见 demo)

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

CSS3样式:box-shadow,border-radius和transition,PS教程,思缘教程网

CSS

倒影 (见 demo)

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

CSS3样式:box-shadow,border-radius和transition,PS教程,思缘教程网

CSS

光泽和倒影(见 demo)

这个例子中,我同时使用了:before和:after伪元素来实现带倒影的光泽效果。

CSS3样式:box-shadow,border-radius和transition,PS教程,思缘教程网

CSS

胶带风格(见 demo)

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

CSS3样式:box-shadow,border-radius和transition,PS教程,思缘教程网

CSS

变形和着色 (见 demo)

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

CSS3样式:box-shadow,border-radius和transition,PS教程,思缘教程网

CSS

羽化边缘的圆形(见demo)

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

CSS3样式:box-shadow,border-radius和transition,PS教程,思缘教程网

CSS

浏览器支持

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

发挥你的创造力

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

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