css3 border-radius不支持IE8/IE7的四种解决方法
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> <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
属性值等于这个纹理对象就可以了。