文章

CSS3图片圆角的特效实践

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

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

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

兼容问题

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

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

1 第1张

解决方法

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

2 第2张

js的解决方法

<script src="http://libs.baidu.com/jquery/1.5.0/jquery.js"></script><script type="text/javascript">// <![CDATA[
$(document).ready(function(){ 
 
$("img").load(function() { 
$(this).wrap(function(){ 
return '<span class="image-wrap ' + $(this).attr('class') + '" style="position:relative; display:inline-block; background:url(' + $(this).attr('src') + ') no-repeat center center; width: ' + $(this).width() + 'px; height: ' + $(this).height() + 'px;" />'; 
}); 
$(this).css("opacity","0"); 
}); 
 
});
// ]]></script>

脚本的输出结果

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

<span class="image-wrap " style="position: relative; display: inline-block; background: url('image.jpg') no-repeat center center; width: 150px; height: 150px;">
 <img style="opacity: 0;" src="image.jpg" alt="" />
</span>

圆的图像

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

3 第3张

CSS代码

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

卡片式

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

4 第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 第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 第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;
}

开孔式

我们可以給图像加上内阴影的效果,让它看上像陷进去一样。

7 第7张

CSS

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

变形与发光

这个例子里,我们给图形添加一个过渡动画,当鼠标悬浮在图形上的时候,它会过渡成一个圆形的内发光效果。

8 第8张

CSS

.morphing-glowing .image-wrap {
 -webkit-transition: 1s;
 -moz-transition: 1s;
 transition: 1s;
 -webkit-border-radius: 20px;
 -moz-border-radius: 20px;
 border-radius: 20px;
}
.morphing-glowing .image-wrap:hover {
 -webkit-box-shadow: 0 0 20px rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);
 -moz-box-shadow: 0 0 20px rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);
 box-shadow: 0 0 20px rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);
 -webkit-border-radius: 60em;
 -moz-border-radius: 60em;
 border-radius: 60em;
}

光滑层

我们给图形加上一个高光的效果,有点类似IOS的图标。

9 第9张

CSS

.glossy .image-wrap {
 -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.5);
 -moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,.5);
 box-shadow: inset 0 -1px 0 rgba(0,0,0,.5);
 -webkit-border-radius: 20px;
 -moz-border-radius: 20px;
 border-radius: 20px;
}
.glossy .image-wrap:after {
 position: absolute;
 content: ' ';
 width: 100%;
 height: 50%;
 top: 0;
 left: 0;
 -webkit-border-radius: 20px;
 -moz-border-radius: 20px;
 border-radius: 20px;
 background: -moz-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,.1) 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.7)), color-stop(100%,rgba(255,255,255,.1)));
 background: linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,.1) 100%);
}

反射

也可以给图形加上倒影效果,让它看上去像摆在地上一样。

10 第10张

CSS

.reflection .image-wrap:after {
	 position: absolute;
	 content: ' ';
	 width: 100%;
	 height: 30px;
	 bottom: -31px;
	 left: 0;
	 -webkit-border-top-left-radius: 20px;
	 -webkit-border-top-right-radius: 20px;
	 -moz-border-radius-topleft: 20px;
	 -moz-border-radius-topright: 20px;
	 border-top-left-radius: 20px;
	 border-top-right-radius: 20px;
	 background: -moz-linear-gradient(top, rgba(0,0,0,.3) 0%, rgba(255,255,255,0) 100%);
	 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,.3)), color-stop(100%,rgba(255,255,255,0)));
	 background: linear-gradient(top, rgba(0,0,0,.3) 0%,rgba(255,255,255,0) 100%);
}
.reflection .image-wrap:hover {
	 position: relative;
	 top: -8px;
}

光泽和反射

把前两部合并起来,我们得到了这样的效果

11 第11张

CSS

.glossy-reflection .image-wrap {
	 -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.6);
	 -moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.6);
	 box-shadow: inset 0 -1px 0 rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.6);
	 -webkit-transition: 1s;
	 -moz-transition: 1s;
	 transition: 1s;
	 -webkit-border-radius: 20px;
	 -moz-border-radius: 20px;
	 border-radius: 20px;
}
.glossy-reflection .image-wrap:before {
	 position: absolute;
	 content: ' ';
	 width: 100%;
	 height: 50%;
	 top: 0;
	 left: 0;
	 -webkit-border-radius: 20px;
	 -moz-border-radius: 20px;
	 border-radius: 20px;
	 background: -moz-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,.1) 100%);
	 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.7)), color-stop(100%,rgba(255,255,255,.1)));
	 background: linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,.1) 100%);
}
.glossy-reflection .image-wrap:after {
	 position: absolute;
	 content: ' ';
	 width: 100%;
	 height: 30px;
	 bottom: -31px;
	 left: 0;
	 -webkit-border-top-left-radius: 20px;
	 -webkit-border-top-right-radius: 20px;
	 -moz-border-radius-topleft: 20px;
	 -moz-border-radius-topright: 20px;
	 border-top-left-radius: 20px;
	 border-top-right-radius: 20px;
	 background: -moz-linear-gradient(top, rgba(230,230,230,.3) 0%, rgba(230,230,230,0) 100%);
	 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(230,230,230,.3)), color-stop(100%,rgba(230,230,230,0)));
	 background: linear-gradient(top, rgba(230,230,230,.3) 0%,rgba(230,230,230,0) 100%);
}

带式

我们给图形添加了一个层,有点像一个胶带贴在上面

12 第12张

CSS

.tape .image-wrap {
	 -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,.7), inset 0 2px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);
	 -moz-box-shadow: inset 0 0 2px rgba(0,0,0,.7), inset 0 2px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);
	 box-shadow: inset 0 0 2px rgba(0,0,0,.7), inset 0 2px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);
}
.tape .image-wrap:after {
	 position: absolute;
	 content: ' ';
	 width: 60px;
	 height: 25px;
	 top: -10px;
	 left: 50%;
	 margin-left: -30px;
	 border: solid 1px rgba(137,130,48,.2);
	 background: -moz-linear-gradient(top, rgba(254,243,127,.6) 0%, rgba(240,224,54,.6) 100%);
	 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(254,243,127,.6)), color-stop(100%,rgba(240,224,54,.6)));
	 background: linear-gradient(top, rgba(254,243,127,.6) 0%,rgba(240,224,54,.6) 100%);
	 -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 0 rgba(0,0,0,.2);
}

变形与染色

鼠标悬浮上去,看看它有什么变化?

13 第13张

CSS

.morphing-tinting .image-wrap {
	 position: relative;
	 -webkit-transition: 1s;
	 -moz-transition: 1s;
	 transition: 1s;
	 -webkit-border-radius: 20px;
	 -moz-border-radius: 20px;
	 border-radius: 20px;
}
.morphing-tinting .image-wrap:hover {
	 -webkit-border-radius: 30em;
	 -moz-border-radius: 30em;
	 border-radius: 30em;
}
.morphing-tinting .image-wrap:after {
	 position: absolute;
	 content: ' ';
	 width: 100%;
	 height: 100%;
	 top: 0;
	 left: 0;
	 -webkit-transition: 1s;
	 -moz-transition: 1s;
	 transition: 1s;
	 -webkit-border-radius: 30em;
	 -moz-border-radius: 30em;
	 border-radius: 30em;
}
.morphing-tinting .image-wrap:hover:after {
	 background: -webkit-gradient(radial, 50% 50%, 40, 50% 50%, 80, from(rgba(0,0,0,0)), to(rgba(0,0,0,1)));
	 background: -moz-radial-gradient(50% 50%, circle, rgba(0,0,0,0) 40px, rgba(0,0,0,1) 80px);
}

羽毛边圈

我们再来看一下CSS实现羽化的效果。

14 第14张

CSS

.feather .image-wrap {
	 position: relative;
	 -webkit-border-radius: 30em;
	 -moz-border-radius: 30em;
	 border-radius: 30em;
}
.feather .image-wrap:after {
	 position: absolute;
	 content: ' ';
	 width: 100%;
	 height: 100%;
	 top: 0;
	 left: 0;
	 background: -webkit-gradient(radial, 50% 50%, 50, 50% 50%, 70, from(rgba(255,255,255,0)), to(rgba(255,255,255,1)));
	 background: -moz-radial-gradient(50% 50%, circle, rgba(255,255,255,0) 50px, rgba(255,255,255,1) 70px);
}

一点CSS小技巧

使用CSS伪类:after,相当于创建一个独立的层遮挡在图像上面,同样可以得到不错的效果。

image-wrap-after 第15张

CSS

.image-wrap {
	 position: relative;
	 display: inline-block;
	 max-width: 100%;
	 vertical-align: bottom;
}
.image-wrap:after {
	 content: ' ';
	 width: 100%;
	 height: 100%;
	 position: absolute;
	 top: -1px;
	 left: -1px;
	 border: solid 1px #1b1b1b;
	 -wekbit-box-shadow: inset 0 0 1px rgba(255,255,255,.4), inset 0 1px 0 rgba(255,255,255,.4), 0 1px 2px rgba(0,0,0,.3);
	 -moz-box-shadow: inset 0 0 1px rgba(255,255,255,.4), inset 0 1px 0 rgba(255,255,255,.4), 0 1px 2px rgba(0,0,0,.3);
	 box-shadow: inset 0 0 1px rgba(255,255,255,.4), inset 0 1px 0 rgba(255,255,255,.4), 0 1px 2px rgba(0,0,0,.3);
	 -webkit-border-radius: 7px;
	 -moz-border-radius: 7px;
	 border-radius: 7px;
}
.image-wrap img {
	 vertical-align: bottom;
	 -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4);
	 -moz-box-shadow: 0 1px 2px rgba(0,0,0,.4);
	 box-shadow: 0 1px 2px rgba(0,0,0,.4);
	 -webkit-border-radius: 6px;
	 -moz-border-radius: 6px;
	 border-radius: 6px;
}

浏览器功能

上述例子在支持CSS3的浏览器上可以显示出非常棒的效果,不支持CSS3的浏览器上就啥效果也看不到了。

3 0

发表评论