jQuery和CSS3给图片制作圆角

作者：大漠 日期：2011-08-28 点击：955
border-radius

圆角，这东西在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的使用，如下图所示：

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

				-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就能实现圆角统一的效果了。具体我们来看一个实例，假如我们需要给一个图片增加圆角：

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

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

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

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

				<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"比其他方法更好，这样可以让图片进行下载或复制。

				<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代码：

				<script type="text/javascript">
					$(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>

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

				.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”，将行内元素转为行内块或块元素，这样才会有效果，如：

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

				$("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上在部分浏览器下也会无效果的，其解决办法也可通过这个办法来实现，具体的大家可以点击《CSS3 box-shadow》查阅更详细的解决方法。

如需转载烦请注明出处：W3CPLUS

返回顶部