canvas教程

css3 border-radius不支持IE8/IE7的四种解决方法

字号+ 作者:H5之家 来源:H5之家 2017-07-26 19:13 我要评论( )

css3 border-radius用于设置HTML元素的圆角效果,但只有IE9、chorme及firefox浏览器支持该属性,IE8及以下浏览器不兼容也不支持border-radius属性,本文章向大家

css3 border-radius用于设置HTML元素的圆角效果,但只有IE9、chorme及firefox浏览器支持该属性,IE8及以下浏览器不兼容也不支持border-radius属性,本文章向大家介绍如何解决IE8兼容border-radius属性的方法,需要的朋友可以参考一下。


注:本网站为码农们提供的大量编程教程:java教程,java实例,php教程,mysql教程,css教程,html教程,,oracle教程等等,如有兴趣,大家可以学习。

 

border-radius是css3的属性,因此比较早的浏览器是不会支持该属性的,如何才能实现border-radius兼容老版本的浏览器呢?

 

第一种方法:ie-css3.htc

我们可以使用网上提供的一个插件来解决这个问题。

第一步:下载.htc文件:下载

第二步:使用behavior通知浏览器调用脚本,代码如下:

box { -moz-border-radius: 15px; /* Firefox */ -webkit-border-radius: 15px; /* Safari 和 Chrome */ border-radius: 15px; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */ behavior: url(ie-css3.htc); /* 通知IE浏览器调用脚本作用于'box'类 */ }

 

第二种方法:DD_roundies实现圆角

DD_roundies下载地址:

DD_roundies.js:

DD_roundies.min.js:

实现代码:

<!DOCTYPE HTML> <html> <head> <title></title> <script src="DD_roundies.js"></script> </head> <body> <div> </div> <img src="2.jpg" alt=""/> <script type="text/javascript"> DD_roundies.addRule('.test', '10px 10px', true); </script> </body> </html>

 

第三种方法:SVG实现图片圆角效果

本处的实现原理适用于各种SVG规则的或不规则的图形。

SVG实现图片圆角关键是借助元素<pattern>.

举个板栗,如果实现名为test.jpg的图片圆形效果,大小100px * 100px, 则SVG代码如下:

<svg> <desc>SVG圆角效果</desc> <defs> <pattern patternUnits="userSpaceOnUse"> <image xlink:href="test.jpg" x="0" y="0" /> </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() { // 创建图片纹理 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属性值等于这个纹理对象就可以了。

 

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • OrientDB配置数据库

    OrientDB配置数据库

    2017-07-07 18:03

  • WebGL入门教程3 - Canvas、Context、API和绘制一个矩形

    WebGL入门教程3 - Canvas、Context、API和绘制一个矩形

    2017-06-13 12:01

  • javascript教程java教程html教程css教程it之家

    javascript教程java教程html教程css教程it之家

    2017-06-01 10:00

  • HTML5+CSS3基于canvas实现电子彩票刮刮乐功能

    HTML5+CSS3基于canvas实现电子彩票刮刮乐功能

    2017-05-23 18:01

网友点评
t