JQuery和CSS3给图片制作圆角

圆角，这东西在Web页面应用方面，大家在熟悉不过的东西了，以前是使用图片来制作，但现在敢于挑战的同学也在尝试使用CSS3的border-radius来制作圆角。在前面,我在《CSS3的圆角Border-radius》专门介绍过CSS3的border-radius属性。感兴趣的同学可以去学习一下，今天和大家要讨论的不是如何使用CSS3的border-radius，而是要和大家一起讨论如何使用border-radius属性，能让image具有圆角效果。在《CSS3的圆角Border-radius》就有提出过在一些浏览器中，border-radius用在图片上根本不起效果，我们来看一下效果：

左图是在Safari5.0、Google Chrome 10.0、Opera11.1下的效果，我们可以看得出，图片根本就没有圆角效果，右图是在Firefox4.0下的效果，低于这个版本的和左图一样效果，如果需要达成一致效果，我们就需要使用别的方法来实现。这也正是今天我要和同学们一起探讨的东西——用jQuery和CSS3的border-radius让图片具有圆角效果。

在开始之前，大家先简单的了解一下border-radius的使用，如下图所示：

由于浏览器支持情况不一致，所以在实际应用中还是需要带上各自的前缀，如：

1 2 3

-moz-border-radius: none | { 1 , 4 } [/ { 1 , 4 } ]?   -webkit-border-radius: none | { 1 , 4 } [/ { 1 , 4 } ]?   border-radius: none | { 1 , 4 } [/ { 1 , 4 } ]?

上面简单的回忆了一下，border-radius的使用，那么现在回到我们今天的正题：使用CSS3的border-radius让图片具有圆角效果，如下图所示：

前面也简单的提过一下，单独使用border-radius属性来给图片增加圆角效果，在Safari5.0、Google Chrome 10.0、Opera11.1和Firefox4.0以下的现代浏览器中不会具有圆角效果，或者圆角会残缺不全，如图所示：

那么如何来解决呢？其实很简单，我们只需要通过jQuery动态的给图片外增加一个标签，比如说:span标签，并把图片转换成新加span标签的背景图，最后把图片隐藏不显示，这样在给span标签应用圆角border-radius就能实现圆角统一的效果了。具体我们来看一个实例，假如我们需要给一个图片增加圆角：

1	< img src = "images/thumb.jpg" width = "70" height = "70" class = "imgRound" alt = "Thumb" / >

第一步：通过jquery在img外增加一个标签：

1	< span >< img src = "images/thumb.jpg" width = "70" height = "70" class = "imgRound" alt = "Thumb" / ></ span >

第二步：通过jquery将img转换成span的背景图

1 2 3

< span class = "imgRound" style = "background:url(" images/thumb.jpg") no-repeat center center; width:70px; height: 70px;">   < img src = "images/thumb.jpg" width = "70" height = "70" class = "imgRound" alt = "Thumb" / > </ span >

三步：将图片img隐藏，隐藏图片你可以使用”opacity:0″或”display:none”或”visibility:hidden”来实现，我个人觉得使用”opacity:0″比其他方法更好，这样可以让图片进行下载或复制。

1 2 3

< span class = "imgRound" style = "background:url(" images/thumb.jpg") no-repeat center center; width:70px; height: 70px;"> < img src = "images/thumb.jpg" width = "70" height = "70" class = "imgRound" alt = "Thumb" style = "opacity:0" / > </ span >

上面都是实现的原理，关键地方是在这里，如何使用jQuery让上面的过程都逐步实现，具体的我们看下面的jQuery代码：

01 02 03 04 05 06 07 08 09 10 11 12

<script type= "text/<a title=" javascript " href=" http: //www.xyhtml5.com/javascript">javascript</a>">   $(document).ready( function (){ $( "imgRound" ).load( function () { $( this ).wrap( function (){ return '<span class="' + $( this ).attr( 'class' ) + '" style="background:url(' + $( this ).attr( 'src' ) + ') no-repeat center center; width: ' + $( this ).width() + 'px; height:   ' + $( this ).height() + 'px;" ></span>' ; }); $( this ).css( "opacity" , "0" );   }); }); </script>

最后一步就是应用样式了：

1 2 3 4 5 6 7

.imgRound { display : inline- block ; border : 10px solid green ; -moz-border-radius: 15px ; -webkit-border-radius: 15px ; border-radius: 15px ; }

因为我们加的是span标签，他是行内元素，不具有高和宽的属性设置，所以在样式中需要加上“display:inline-block”或“dispaly:block”，将行内元素转为行内块或块元素，这样才会有效果，如：

上面我们是针对选定的图片操作，如果你需要对所有图片进行操作，可以将上在的代码稍为改一下：

1 2 3 4 5 6 7 8

$( "img" ).load(function(){ $( this ).wrap(function(){ return '<span class="' + $( this ).attr( 'class' ) + '" style="background:url(' + $( this ).attr( 'src' ) + ') no-repeat center center; width: ' + $( this ).width() + 'px; height:   ' + $(this).height() + ' px;"></span>';   }); $( this ).css( "opacity" , "0" );   });

这样实现图片的圆角统一是不是很方便呀，感兴趣的自己尝试一下，最后还有一点需要提醒大家一点，css3中不单只border-radius应用在img会在部分浏览器中无效，其实另一个属性，box-shadow的内阴影（inset）应用在img上在部分浏览器下也会无效果的，其解决办法也可通过这个办法来实现。

转载http://www.xyhtml5.com/jquery-css3-make-rounded.html