浏览器对CSS3的效果支持还不是很完美，比如阴影（box-shadow）和圆角（border-radius）作用在图片对象上就会出现一些问题。

如果把图片作为背景的话，兼容效果就好了很多。

今天我们要论一下如何使用盒阴影，圆角等实现各种特效。

兼容问题

相信大家都遇到过这个问题，很多浏览器下，div内嵌的图片对象不受div上设置的圆角和内阴影的影响。

这就会出现类似下面的效果：

1

解决方法

解决这个问题的办法就是把内嵌的图片设置在层上，作为层的背景图片。

2

js的解决方法

脚本的输出结果

上面的代码将输出下面的HTML代码：

圆的图像

解决了兼容的问题，现在我们可以給它添加任何效果了，我们先来看一个最简单的，圆形图像的实现。

3


CSS代码 

.circle .image-wrap {
 -webkit-border-radius: 50em;
 -moz-border-radius: 50em;
 border-radius: 50em;
}

卡片式

接下来实现一款卡片式效果：

4


CSS 

.card .image-wrap {
 -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.4);
 -moz-box-shadow: inset 0 0 1px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.4);
 box-shadow: inset 0 0 1px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.4);
 -webkit-border-radius: 20px;
 -moz-border-radius: 20px;
 border-radius: 20px;
}

浮雕风格

我们给卡片图形加一个浮雕的效果，让它看起来更立体。

5


CSS 

.embossed .image-wrap {
 -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -7px 0 rgba(0,0,0,.6), inset 0 -9px 0 rgba(255,255,255,.3);
 -moz-box-shadow: inset 0 0 2px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -7px 0 rgba(0,0,0,.6), inset 0 -9px 0 rgba(255,255,255,.3);
 box-shadow: inset 0 0 2px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -7px 0 rgba(0,0,0,.6), inset 0 -9px 0 rgba(255,255,255,.3);
 -webkit-border-radius: 20px;
 -moz-border-radius: 20px;
 border-radius: 20px;
}

软浮雕风格

让我们给浮雕的边缘来一点模糊的效果，让它看上去更有质感。

6


CSS 

.soft-embossed .image-wrap {
 -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,1), inset 0 2px 1px rgba(255,255,255,.5), inset 0 -9px 2px rgba(0,0,0,.6), inset 0 -12px 2px rgba(255,255,255,.3);
 -moz-box-shadow: inset 0 0 4px rgba(0,0,0,1), inset 0 2px 1px rgba(255,255,255,.5), inset 0 -9px 2px rgba(0,0,0,.6), inset 0 -12px 2px rgba(255,255,255,.3);
 box-shadow: inset 0 0 4px rgba(0,0,0,1), inset 0 2px 1px rgba(255,255,255,.5), inset 0 -9px 2px rgba(0,0,0,.6), inset 0 -12px 2px rgba(255,255,255,.3);
 -webkit-border-radius: 20px;
 -moz-border-radius: 20px;
 border-radius: 20px;
}

来源：http://www.vqianduan.com/963.html