运用jQuery打造CSS3完美圆角图片

某日当我给图片添加 CSS3 圆角样式（border-radius）时意识到Firefox并不支持该属性。之后我摸索出一种方法来实现——给原始图像添加span标签并置其本身为背景图像。

效果预览：点击查看  

目标

我的目标是运用CSS3 border-radius 和 box-shadow 属性让图片展示以下效果：

问题

问题是浏览器并不能渲染成预期的效果。Webkit 内核浏览器能呈现圆角但不支持内阴影；而Firefox干脆就不正常图片圆角。

CSS技巧

这个技巧相当简单：给图像添加span标签，将原图像作为背景图像。为了隐藏原图像，添加 opacity:0 或 display:none。个人感觉opacity的方法更好，因为此时图像依旧能下载及复制。

运用jQuery的最终解决方案

为了让操作更加简单，我们可以云云jQuery给图像自动添加span标签。

下面的jQuery代码将会自动识别任何带有 .rounded-img 和 rounded-img2 的元素并添加span标签。该脚本能自动识别 src, width, height及原图像的class值，并给span添加内联（inline）属性，接着设置透明度（opacity）为0。

这适合任何尺寸的图像（无论有没有声明图片尺寸）。它还可以与其他的CSS配合使用，无需额外的标记。

<script type="text/javascript" src="jquery-1.4.2.min.js"></script><script type="text/javascript">// <![CDATA[
$(document).ready(function(){

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

});
// ]]></script>

用法示例

希望这个技巧对你有用。例如，您可以用它来你的博客的个性头像或个人资料照片。

PS：jQuery代码提供： Darcy Clarke