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

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

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

1

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

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

1

2

3

<spanclass="imgRound"style="background:url("images/thumb.jpg") no-repeat center center; width:70px; height: 70px;">

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

</span>

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

1

2

3

<spanclass="imgRound"style="background:url("images/thumb.jpg") no-repeat center center; width:70px; height: 70px;">

<imgsrc="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:10pxsolid 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