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

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

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

第一种方法：ie-css3.htc

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

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

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

  1. box {
  2.   -moz-border-radius: 15px; /* Firefox */
  3.   -webkit-border-radius: 15px; /* Safari 和 Chrome http://www.manongjc.com/article/1214.html */
  4.   border-radius: 15px; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */
  5.   behavior: url(ie-css3.htc); /* 通知IE浏览器调用脚本作用于'box'类 */
  6. }

第二种方法：DD_roundies实现圆角

DD_roundies下载地址：

DD_roundies.js：http://pan.baidu.com/s/1o68wluE

DD_roundies.min.js：http://pan.baidu.com/s/1jGqTwI6

实现代码：

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <title>http://www.manongjc.com/article/1214.html</title>
  5. <script src="DD_roundies.js"></script>
  6. </head>
  7. <body>
  8. <div class="test" style="background-image:url(2.jpg);width:88px;height:106px;">
  9. </div>
  10. <img src="2.jpg" alt="" class="test"/>
  11. <script type="text/javascript">
  12.         DD_roundies.addRule('.test', '10px 10px', true);
  13. </script>
  14. </body>
  15. </html>

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

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

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

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

  1. <svg width="100" height="100">
  2.     <desc>SVG圆角效果</desc>
  3.     <defs>
  4.         <pattern id="raduisImage" patternUnits="userSpaceOnUse" width="100" height="100">
  5.             <image xlink:href="test.jpg" x="0" y="0" width="625" height="605" />
  6.         </pattern>
  7.     </defs>
  8.     <circle cx="50" cy="50" r="50" fill="url(#raduisImage)"></circle>
  9. </svg>

图形元素都有一个fill属性，让其值url锚向<pattern>的id就可以了。

第四种方法：Canvas实现图片圆角效果

本规则适用于各种Canvas绘制的规则或不规则图形。

Canvas实现图片圆角的关键是使用“纹理填充”。

Canvas中有个名为createPattern的方法，可以让已知尺寸的图片元素转换成纹理对象，作填充用。

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

  1. // canvas元素, 图片元素
  2. var canvas = document.querySelector("#canvas"), image = new Image();
  3. var context = canvas.getContext("2d");
  4. image.onload = function() {
  5.     // 创建图片纹理 http://www.manongjc.com/article/1214.html
  6.     var pattern = context.createPattern(image, "no-repeat");
  7.     // 绘制一个圆
  8.     context.arc(50, 50, 50, 0, 2 * Math.PI);
  9.     // 填充绘制的圆
  10.     context.fillStyle = pattern;
  11.     context.fill();
  12. };
  13. image.src = "test.jpg";

让Canvas上下文的fillStyle属性值等于这个纹理对象就可以了。

 

原文地址：http://www.manongjc.com/article/1214.html

border-radius,box-shadow兼容性解决办法的更多相关文章

  1. WCF不支持 ASP.NET 兼容性 解决办法

    错 误提示:无法激活服务,因为它不支持 ASP.NET 兼容性.已为此应用程序启用了 ASP.NET 兼容性.请在 web.config 中关闭 ASP.NET 兼容性模式或将 AspNetCompa ...

  2. vagrant up下载box慢的解决办法

    即在运行vagrant up时得到其的下载路径,如: https://vagrantcloud.com/ubuntu/boxes/xenial64/versions/20190101.0.0/prov ...

  3. <转>JavaScript的IE和火狐的兼容性解决办法

    原文发布时间为:2009-05-06 -- 来源于本人的百度文章 [由搬家工具导入] 1. document.form.item 问题 (1)现有问题： 现有代码中存在许多 document.form ...

  4. [AJAX]ajax在兼容模式下失效解决办法

    使用jQuery,用ajax实现局部刷新功能,在火狐,360急速浏览器高速模式下,ie8,9都能正常运行,但切换到兼容模式下无效,解决办法有两种关闭浏览器兼容性视图,二是引入json2.js文件 这里 ...

  5. 子元素的margin-top影响父元素原因和解决办法

    这个问题会出现在所有浏览器当中,原因是css2.1盒子模型中规定, In this specification, the expression collapsing margins means tha ...

  6. IE6-IE11兼容性问题列表及解决办法总结

    相比IE6-IE9那版,主要添加IE10和IE11的新变化. 以下是目录及下载链接: 目录 概述 2 第一章:HTML 3 第一节:IE7-IE8更新 3 1. 如果缺少结束标记的 P 元素后跟 TA ...

  7. IE6-IE9兼容性问题列表及解决办法总结

    IE6-IE9兼容性问题列表及解决办法总结 概述 第一章:HTML. 3 第一节:IE7-IE8更新... 31.如果缺少结束标记的 P 元素后跟 TABLE.FORM.NOFRAMES 或 NOSC ...

  8. IE6-IE11兼容性问题列表及解决办法

    IE6-IE11兼容性问题列表及解决办法总结 相比IE6-IE9那版,主要添加IE10和IE11的新变化. 以下是目录及下载链接: 目录概述 2第一章:HTML 3第一节:IE7-IE8更新 3 1. ...

  9. win8下安装VC6出现兼容性问题的解决办法

    重装系统之后(win8的系统),发现VC6安装出现兼容性问题,花了一些时间解决,有出现的问题都差不多在下面链接的总结中,写的很详细: http://www.docin.com/p-1126120829 ...

随机推荐

  1. 记录几个字符串转html的帮助类，已防忘记

    html的帮助类 /// <summary> /// Represents a HTML helper /// </summary> public partial class ...

  2. label 的for属性总结

    一.使用介绍 1. 定义:for属性规定label与哪个表单元素绑定. <label>是专门为<input>元素服务的,为其定义标记. label 和表单控件绑定方式有两种: ...

  3. 【论文速读】Multi-Oriented Scene Text Detection via Corner Localization and Region Segmentation[2018-CPVR]

    方法概述 该方法用一个端到端网络完成文字检测整个过程——除了基础卷积网络(backbone)外,包括两个并行分支和一个后处理.第一个分支是通过一个DSSD网络进行角点检测来提取候选文字区域,第二个分支 ...

  4. python pyqt4问题记录

    在python中在终端中使用pip无法完成pyqt4的安装. 在官网下载相应的最新文件,在cmd中使用命令也无法实现安装 最终发现python最新的版本(现在已是3.7版本),无法安装. 解决办法为将 ...

  5. Objective-C基础教程 笔记

    一.对C的扩展 1. #import VS #include C语言使用#include语句通知编译器应在头文件中查询定义. OC中也可以使用#include,但几乎不这么用,而是使用#import. ...

  6. orangepi one AP模式配置

    前两天买了一块orangepi one开发板,目的是做个局域网共享目录,具体共享协议用samba:这块板子有两个网卡,一个有线一个无线:有线主要用来ssh登陆调试,修改配置. 首先下载armbian的 ...

  7. [CentOS] 环境变量设置的三种方法

    在CentOS系统中添加环境变量的方法有几种,推荐第三种方法.这里以添加 TexLive 2017 的环境变量为例进行说明. 1. 修改  ~/.bash_profile  文档,在文末添加以下代码: ...

  8. 微信小程序 遇到的问题（新）

    1.调用wx.chooseImage(),调用系统相册,此时相册中的动图被转化成静态图,上传后也是静态图. 2.刚进微信小程序,onShow在安卓机下会调用两遍,iPhone下正常

  9. bootstrap全局样式

    内联子标题: 显示如下: 主体副本: 显示如下: 对齐类: 显示如下: 强调类: 显示如下: 缩略语: 地址: 表格: 加一个class:“table-striped” js里面的奇数偶数行(odd) ...

  10. Rsync数据同步服务

    Rsync数据同步服务 Rsync软件适用与unix/linux/windows等多种操作系统平台 Rsync是一款开源的,快速的,多功能的,可实现全量及增量的本地或远程数据同步备份的优秀工具,可以实 ...