css3 border-radius不支持IE8/IE7的四种解决方法
时间: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
属性值等于这个纹理对象就可以了。
- 【Spring实战】—— 8 自动装配
- 【Spring实战】—— 7 复杂集合类型的注入
- 【Spring实战】—— 6 内部Bean
- 几款可替代Dreamweaver的HTML5开发工具
- Linux下的Telnet设置方法介绍
- 2017年11月互联网和相关服务业保持快速增长
- 深度学习胸部x射线
- C+实现神经网络之壹—Net类的设计和神经网络的初始化
- 死亡不可避免,但何时死,人工智能或有发言权
- 打开手机的这个功能,微信支付宝不怕盗刷!
- 手把手教你cuda5.5与VS2010的编译环境搭建
- Apache实现反向代理负载均衡
- linux下Apache服务器使用入门----httpd.conf
- linux下JBOSS使用入门
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- 浅谈布隆过滤器
- Python 技术篇-获取图片GPS信息,锁定追踪图片拍摄地点、拍摄时间
- 测试工具 - Postman接口测试入门使用手册,Postman如何进行数据关联、自动更新cookies、简单编程
- 白盒测试工具 - sonar的安装、配置与使用入门手册,用sonar检查代码质量实战演示
- Chmod -R 777 / 误操作恢复教程
- 最全总结 | 聊聊 Python 数据处理全家桶(Redis篇)
- 虚拟机安装mikrotik-ROS
- 搬砖武士|手把手教你在容器服务 TKE 上使用 LB直通 Pod
- linux安装snmp服务-ubuntu
- 企业微信机器人
- Kubernetes 新玩法:在 YAML 中编程
- 全网最实用 Python 面试题大全(花费了整整 3 天时间整理出来的)
- paramiko模块
- Loki 和 Fluentd 的那点事儿
- Hive改表结构的两个坑|避坑指南