border-radius,box-shadow兼容性解决办法
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属性值等于这个纹理对象就可以了。
border-radius,box-shadow兼容性解决办法的更多相关文章
- WCF不支持 ASP.NET 兼容性 解决办法
错 误提示:无法激活服务,因为它不支持 ASP.NET 兼容性.已为此应用程序启用了 ASP.NET 兼容性.请在 web.config 中关闭 ASP.NET 兼容性模式或将 AspNetCompa ...
- vagrant up下载box慢的解决办法
即在运行vagrant up时得到其的下载路径,如: https://vagrantcloud.com/ubuntu/boxes/xenial64/versions/20190101.0.0/prov ...
- <转>JavaScript的IE和火狐的兼容性解决办法
原文发布时间为:2009-05-06 -- 来源于本人的百度文章 [由搬家工具导入] 1. document.form.item 问题 (1)现有问题： 现有代码中存在许多 document.form ...
- [AJAX]ajax在兼容模式下失效解决办法
使用jQuery,用ajax实现局部刷新功能,在火狐,360急速浏览器高速模式下,ie8,9都能正常运行,但切换到兼容模式下无效,解决办法有两种关闭浏览器兼容性视图,二是引入json2.js文件 这里 ...
- 子元素的margin-top影响父元素原因和解决办法
这个问题会出现在所有浏览器当中,原因是css2.1盒子模型中规定, In this specification, the expression collapsing margins means tha ...
- IE6-IE11兼容性问题列表及解决办法总结
相比IE6-IE9那版,主要添加IE10和IE11的新变化. 以下是目录及下载链接: 目录 概述 2 第一章:HTML 3 第一节:IE7-IE8更新 3 1. 如果缺少结束标记的 P 元素后跟 TA ...
- IE6-IE9兼容性问题列表及解决办法总结
IE6-IE9兼容性问题列表及解决办法总结 概述 第一章:HTML. 3 第一节:IE7-IE8更新... 31.如果缺少结束标记的 P 元素后跟 TABLE.FORM.NOFRAMES 或 NOSC ...
- IE6-IE11兼容性问题列表及解决办法
IE6-IE11兼容性问题列表及解决办法总结 相比IE6-IE9那版,主要添加IE10和IE11的新变化. 以下是目录及下载链接: 目录概述 2第一章:HTML 3第一节:IE7-IE8更新 3 1. ...
- win8下安装VC6出现兼容性问题的解决办法
重装系统之后(win8的系统),发现VC6安装出现兼容性问题,花了一些时间解决,有出现的问题都差不多在下面链接的总结中,写的很详细: http://www.docin.com/p-1126120829 ...
随机推荐
- UML与软件建模：第一次作业（用例图绘制）
一.小结 用例图是UML用于描述软件功能的图形.用例图包括用例.参与者及其关系,用例图也可以包括注释和结束. 用例图的要素: (1)参与者,即与用例存在交互关系的系统外部实体; (2)用例,用来描述个 ...
- Appium + Python环境搭建（移动端自动化）
安装JDK,配置JDK环境 百度搜索下载就行,这里分享一个下载链接:https://pan.baidu.com/s/1snuTOAx 密码:9z8r. 下载好后点击进行安装.安装好后进行环境变量 ...
- 现代 PHP 新特性 —— Zend Opcache (转)
转自:https://laravelacademy.org/post/4396.html 1.概述 字节码缓存不是PHP的新特性,有很多独立的扩展可以实现,比如APC.eAccelerator和Xac ...
- 毕设记录（ajax）
有关ajax的cache属性值 cache作用:是否在缓存中读取数据的读取. cache属性是true(默认值)时:在第一次请求完成之后,如果地址和参数不变化,第二次去请求,会默认获取缓存中的数据,不 ...
- jquery 根据文本设置选中某个选项
<select name="streetid" id="streetid"> <option value="4">a ...
- docker 容器的mysql主从复制
一. 1.首先拉取docker镜像,我们这里使用5.7版本的mysql: docker pull mysql:5.7 2.分别启动主从两个容器: docker run -p 3339:3306 - ...
- INTRODUCE OF REPRESENTATIVE CPG-CONTROLLED ROBOTS
仿生机器人研究是非常有意思的领域,它不仅从自然界中获取灵感,它也为一些生物的研究提供一个手段和基础,正如下图中所展示的.不论人工智能发展的如何迅速,机械结构始终做为着一个承载的平台,其重要性不可忽略. ...
- Linux桌面系统常用软件和笔记(更新)
(一).下文涉及到的环境 manjaro.deepin.Arch等 有些可以通用 有些不可以通用 (二).常用软件下载 一.桌面美化软件 1.桌面壁纸下载软件: varirety 下载方式:可以在多个 ...
- 穿透dom触发事件
const elems = document.elementsFromPoint(e.pageX, e.pageY); const instance = elems.filter(elem => ...
- javascript 模板
今天想记录下对arttemplate模板的使用,哎,其实这玩意的兴起主要还是得从浏览器操作dom说起.如果修改浏览器的某一个dom节点就会引起文档流的重绘,然后这个重绘的耗时相当的大,是昂贵的开销.所 ...