css3 border-radius用于设置HTML元素的圆角效果，但只有IE9、chorme及firefox浏览器支持该属性，IE8及以下浏览器不兼容也不支持border-radius属性，本文章向大家介绍如何解决IE8兼容border-radius属性的方法，需要的朋友可以参考一下。
border-radius是css3的属性，因此比较早的浏览器是不会支持该属性的，如何才能实现border-radius兼容老版本的浏览器呢？
【第一种方法：PIE.HTC或者ie-css3.htc】
【拓展下，.htc可以使ie支持许多css3属性，具体在后面文章里做了总结】
我们可以使用网上提供的一个插件来解决这个问题。
第一步：下载PIE.HTC文件：下载链接http://css3pie.com/download/
第二步：使用behavior通知浏览器调用脚本，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>圆角兼容</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#header {
width: 400px;
height: 400px;
margin: 10px;
border: 1px solid red;
/* Firefox */
-moz-border-radius: 15px;
/* Safari 和 Chrome
-webkit-border-radius: 15px;
/* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */
border-radius: 15px;
/*关键属性设置 需要把路径设置好，通知IE浏览器调用脚本作用于'box'类*/
behavior: url(PIE.htc);
}
</style>
</head>
<body>
<div id="header">
</div>
</body>
</html>
IE8浏览器下效果：
第二种方法：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>
<title>http://www.manongjc.com/article/1214.html</title>
<script src="DD_roundies.js"></script>
</head>
<body>
<div class="test" style="background-image:url(2.jpg);width:88px;height:106px;">
</div>
<img src="2.jpg" alt="" class="test"/>
<script type="text/javascript">
DD_roundies.addRule('.test', '10px 10px', true);
</script>
</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 xlink: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.onload = 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属性值等于这个纹理对象就可以了。
.
相关推荐
根据canisue（http://caniuse.com/#search=border-radius），border-radius兼容性如下图所示： 测试代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta ...
css3的 border-radius 为了兼容ie8浏览器所用到的插件以及实例。为什么要50个字节啊，竟然不能设置成免费。。
让IE实现CSS3中的border-radius（圆角）
border-radius如何兼容IE呢？下面小编就为大家介绍一下border-radius兼容IE的方法。一起跟随小编过来看看吧，祝大家游戏愉快哦
NULL 博文链接：https://jm1999.iteye.com/blog/2218022
下面让我们来看看border-radius的语法，解释，以及IE是如何支持它的。 语法和说明 在CSS3中用来生成圆角效果的属性是border-radius.这个属性跟大家熟知的width等属性的用法相似： 复制代码代码如下:.roundElement {...
前一段时间，我经常收到一个关于如何在IE浏览器中使用CSS3的border-radius属性实现圆角HTML元素的...你或许知道CSS3的border-radius 属性被Safari、Firefox和Chrome等浏览器原生支持，但是由于某些原因IE并不支持它。
解决IE低版本兼容模式下border-radius等CSS样式不生效的组件
border-radius 圆角 box-shadow 块阴影 border-image 图片边框 multiple background images 多背景 linear-gradient as background image 线性渐变背景图片 CSS3 Pie是一个/PIE-2.0beta1/PIE.htc文件
要注意的是它并不能实现所有CSS3效果，其兼容的属性有：box-radius,线性渐变( linear-gradient)，rgba,box-shadow,border-image。使用时直接引入PIE.htc文件即可（但要注意都是以html文档位置与该文件相对位置来引入...
ie各个版本浏览器兼容圆角样式属性：border-radius,具体使用方法可参考：https://blog.csdn.net/Bibabu135766/article/details/79522496
让IE 6,7,8支持CSS3的部分属性。它可以让低版本IE浏览器支持CSS3的border-radius、box-shadow、border-image、CSS3 Backgrounds (-pie-background)、Gradients、RGBA属性。
css3实现圆角矩形 使用border-radius实现圆角，兼容到IE6
IE 和 Opera 就没有私有的圆角属性了，如果有的话，那制作圆角应该就简单多了，把各自的私有属性全部写上，让各个浏览器对号入座，就达到了兼容的效果。 随着网络的发展，CSS 也在不断的完善，充分吸取多年来 Web ...
解决CSS3圆角兼容所有浏览器的方法，该脚本的最大优势是可以在Safari/Chrome/Firefox中使用原生的CSS3属性(通过-webkit-border-radius和-moz-border-radius私有属性分别支持)而在IE和Opera中使用JavaScript。...
为什么要对css属性进行浏览器兼容性总结呢？用的时候，直接去 Can I Use ... border-radius: 最低兼容至 IE9,其它浏览器兼容情况优良。 box-shadow: 最低兼容至IE9, 其它浏览器兼容情况优良。 背景： background-size
1.transform:rotate(45deg) 2.border-top-left-radius 该属性允许您向元素添加圆角边框 3.border-radius 该属性允许您向元素添加圆角边框 4.box-shadow 属性向框添加一个或多个阴影 5.text-shadow 属性向文本设置...
<meta http-equiv="X-UA-Compatible" content="IE=Edge">浏览器兼容 leftmargin="0" topmargin="0" marginheight="0" marginwidth="0"去除页面边框 list-style-type:none;去除li点 "color:red;text-decoration:none...