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通知浏览器调用脚本，代码如下：

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属性值等于这个纹理对象就可以了。

 

原文地址：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. 学习node.js的一些笔记

    最近看了几眼node.js,以前曾听说它用途很大. 在菜鸟教程上,已看了过半的内容:http://www.runoob.com/nodejs/nodejs-web-module.html,如今看到了这 ...

  2. OR，RR，HR 临床分析应用中的差别 对照组暴露比值b/d

    1.相对危险度(relative risk,RR).指暴露于某因素发生某事件的风险,即A/(A+B),除以未暴露人群发生的该事件的风险,即C/(C+D),所得的比值,即RR=［A/(A+B)］/［C/ ...

  3. 开发中常用的es6知识

    结合实际开发,开发中常用的es6的知识: 1.新增let和const命令: ES6 新增了let命令,用来声明变量.它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效: cons ...

  4. oracle中delete、truncate、drop的区别 (转载)

    一.delete 1.delete是DML,执行delete操作时,每次从表中删除一行,并且同时将该行的的删除操作记录在redo和undo表空间中以便进行回滚(rollback)和重做操作,但要注意表 ...

  5. vue中computed、metfods、watch的区别

    一.computed和methods 我们可以将同一函数定义为一个 method 或者一个计算属性.对于最终的结果,两种方式确实是相同的. 不同的是computed计算属性是基于它们的依赖进行缓存的. ...

  6. nextcloud大文件无法上传

    I think that if u got a small /tmp like i had u cant upload big file…My /tmp = 462M so i can upload ...

  7. fastjson对象转为json字符串日期格式变为时间戳问题

    今天尝试将map集合转为json对象时遇到一个问题.map中的value为日期格式如"2019-03-01",在使用JSONObject.toJSON(map).toString( ...

  8. C#中dll调用方法

    我不创造方法,只做方法的搬运工. https://www.cnblogs.com/Asuphy/p/4206623.html

  9. <转载> UE4的Actor类C++简单尝试

    原文链接:   简书小小酥XX https://www.jianshu.com/p/2bcc80f0e789 一开始我用了一段时间UE4,发现如果用蓝图系统真的不太适合我的风格.因为之前一直都是用Un ...

  10. MySQL · 性能优化· 5.7.6 InnoDB page flush 优化

    在这篇文中,我们已经详细介绍了Oracle MySQL以及社区分支最新的对InnoDB page flush的优化.在最近release的5.7.6版本中又有了进一步的改进.主要包括以下几点修改 修改 ...