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 ...
随机推荐
- NetSec2019 20165327 Exp6 信息搜集与漏洞扫描
NetSec2019 20165327 Exp6 信息搜集与漏洞扫描 一.实践目标 掌握信息搜集的最基础技能与常用工具的使用方法. 二.实践内容 1.各种搜索技巧的应用 2.DNS IP注册信息的查询 ...
- RobotFramework自动化测试框架-Selenium Web自动化(-)-Open Browser和Close Browser
Selenium出来已经有很多年了,从最初的Selenium1到后来的Selenium2,也变得越来越成熟,而且也已经被很多公司广泛使用.Selenium发展的过程中,分了很多模块,这里我们主要介绍W ...
- oracle 将一个表复制到另外一个表里 .
复制一个表到另一个表.视图.临时表 博客分类: oracle Oracle数据结构软件测试SQL 创建一个表new_table和old_table表结构一样(没有old_table的记录) creat ...
- springboot killed springboot 无故停止运行解决办法
测试环境的服务部署在阿里云服务器上,运行一段时间总是自动宕掉,在配置文件里加上内存溢出配置,也不能打印出相关日志,一直找不出原因.今天在网上:http://www.cnblogs.com/chener ...
- 蓝桥杯第六届省赛 手链样式 STL
小明有3颗红珊瑚,4颗白珊瑚,5颗黄玛瑙.他想用它们串成一圈作为手链,送给女朋友.现在小明想知道:如果考虑手链可以随意转动或翻转,一共可以有多少不同的组合样式呢? 分析:这个题首先一定要理解题意,转动 ...
- node.js 生成二维码
因为自己的项目中,想在商品详情页上 显示一个 商品优惠券的二维码. 以此为需求. node.js 后台代码 const qr_image = require("qr-image") ...
- 获得ztree的所有子节点id
var treeNodeIds="";//获得所有树节点的id function aa(){ var treeObj = $.fn.zTree.getZTreeObj(" ...
- 模仿WC.exe的功能实现--node.js
Github项目地址:https://github.com/102derLinmenmin/myWc WC 项目要求 wc.exe 是一个常见的工具,它能统计文本文件的字符数.单词数和行数.这个项目要 ...
- postman安装
安装包下载下来,解压缩到你喜欢的位置. 打开 Chrome 浏览器的「扩展程序」 点击「加载已解压的扩展程序...」按钮,找到你刚刚下载的安装包的位置,点击确定. 你去看看 Windows 的开始菜单 ...
- unity打包安卓应用及生成签名
首先,先进行安卓应用的打包.File->build Settings 弹出界面后选择Android,注意,这里如果黄色区域内容与我这个不一致,说明电脑上没有安装studio(安卓开发环境),具体 ...