border-radius是css3的属性，因此比较早的浏览器是不会支持该属性的，如何才能实现border-radius兼容老版本的浏览器呢？
第一种方法：ie-css3.htc
我们可以使用网上提供的一个插件来解决这个问题。
第一步：下载.htc文件：下载
第二步：使用behavior通知浏览器调用脚本，代码如下：
box {
-moz-border-radius: 15px; /* Firefox */
-webkit-border-radius: 15px; /* Safari 和 Chrome http://www.manongjc.com/article/1214.html */
border-radius: 15px; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */
behavior: url(ie-css3.htc); /* 通知IE浏览器调用脚本作用于\'box\'类 */
}
第二种方法：DD_roundies实现圆角
DD_roundies下载地址：
DD_roundies.js：http://pan.baidu.com/s/1o68wluE
DD_roundies.min.js：http://pan.baidu.com/s/1jGqTwI6
实现代码：
<!DOCTYPE HTML>
<html>
<head>
< >http://www.manongjc.com/article/1214.html</ >
< src=\"DD_roundies.js\"></ >
</head>
<body>
<div class=\"test\" style=\"background-image:url(2.jpg);width:88px;height:106px;\">
</div>
<img src=\"2.jpg\" alt=\"\" class=\"test\"/>
< type=\"text/ \">
DD_roundies.addRule(\'.test\', \'10px 10px\', true);
</ >
</body>
</html>
第三种方法：SVG实现图片圆角效果
本处的实现原理适用于各种SVG规则的或不规则的图形。
SVG实现图片圆角关键是借助元素<pattern>.
举个板栗，如果实现名为test.jpg的图片圆形效果，大小100px * 100px, 则SVG代码如下：
<svg width=\"100\" height=\"100\">
<desc>SVG圆角效果</desc>
<defs>
<pattern id=\"raduisImage\" patternUnits=\"userSpaceOnUse\" width=\"100\" height=\"100\">
<image x :href=\"test.jpg\" x=\"0\" y=\"0\" width=\"625\" height=\"605\" />
</pattern>
</defs>
<circle cx=\"50\" cy=\"50\" r=\"50\" fill=\"url(#raduisImage)\"></circle>
</svg>
图形元素都有一个fill属性，让其值url锚向<pattern>的id就可以了。
第四种方法：Canvas实现图片圆角效果
本规则适用于各种Canvas绘制的规则或不规则图形。
Canvas实现图片圆角的关键是使用“纹理填充”。
Canvas中有个名为createPattern的方法，可以让已知尺寸的图片元素转换成纹理对象，作填充用。
举个板栗，如果实现名为test.jpg的图片圆形效果，大小100px * 100px, 则主要JS代码如下：
// canvas元素, 图片元素
var canvas = document.querySelector(\"#canvas\"), image = new Image();
var context = canvas.getContext(\"2d\");
image. = function() {
// 创建图片纹理 http://www.manongjc.com/article/1214.html
var pattern = context.createPattern(image, \"no-repeat\");
// 绘制一个圆
context.arc(50, 50, 50, 0, 2 * Math.PI);
// 填充绘制的圆
context.fillStyle = pattern;
context.fill();
};
image.src = \"test.jpg\";
让Canvas上下文的fillStyle属性值等于这个纹理对象就可以了。
继续阅读与本文标签相同的文章
-
手机信号突然从“4G”变成“E”，是什么意思？客服给出答案
2026-05-14栏目： 教程
-
互联网架起“乌镇式生活”
2026-05-14栏目： 教程
-
微信才是内存“杀手”，别再乱清理，关闭这个功能，手机立马流畅
2026-05-14栏目： 教程
-
手机信号变成E是什么意思？看完专业人士给出的解释后，涨知识了
2026-05-14栏目： 教程
-
关于Word的四个隐藏办公小技巧，你可能一个也不知道，建议收藏！
2026-05-14栏目： 教程