IE兼容css3圆角的实现代码


Posted in HTML / CSS onJuly 21, 2011

让我们弃新技术不用,是不可能的,因此找到了一种解决的办法--- IE利用VML矢量可标记语言作为画笔绘出圆角:

下载一个压缩包ie-css3.htc,里面有一个微软的脚本文件(11KB)和一个用来测试服务器是否有正确的Content-Type的HTML文件,.htc 文件是IE内核支持Web行为后用来描述此类行为的脚本文件。它们定义了一套方法和属性,程序员几乎可以把这些方法和属性应用到HTML页面上的任何元素上去。Web 行为是非常伟大的因为它们允许程序员把自定义的功能“连接”到现有的元素和控件,而不是必须让用户下载二进制文件(例如ActiveX 控件)来完成这个功能。

使用演示:

复制代码
代码如下:

.main{
border: 2px solid #C0C0C0;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
position:relative;
z-index:100;
behavior: url(此处为ie-css3.htc文件的绝对路径);
}

Webkit内核的浏览器支持“-webkit-border-radius: 10px;”属性(10px是圆角半径),可以直接解析出圆角;Firefox浏览器支持“-moz-border-radius: 10px;”属性,也是可以直接解析出圆角;IE系浏览器则需要加上“border-radius: 15px;”的属性。

注意:
1、behavior的url里一定要填写ie-css3.htc的绝对路径,因为 IE浏览器找该文件是相对当前html文件路径来找的,所以对于Wordpress等动态程序生成的页面一定要填写绝对路径。
2、一定要有定位属性:position:relative;
3、因为在IE浏览器下这些CSS3效果的实现是要借助于VML,由VML绘制圆角或是投影效果,所以还需要一个z-index属性。z-index属性最好设置得比较大,如2。
4、如果在IE浏览器下某些模块无法用此渲染,可以试着绝对定位相应的层,即加上“ width: 400px; height:400px;”属性。
5、radius属性的10px是圆角半径,还可以给两个值如“border-radius: 10px 5px;”,这样则左上角与右下角半径为10px,右上角与左下角半径为5px。也可以赋4个值,为“上 右 下 左”。

HTML / CSS 相关文章推荐
css3隔行变换色实现示例
Feb 19 HTML / CSS
css3的transform中scale缩放详解
Dec 08 HTML / CSS
基于CSS3实现图片模糊过滤效果
Nov 19 HTML / CSS
通过CSS3的object-fit来调整图片适配尺寸的技巧简介
Feb 27 HTML / CSS
10分钟理解CSS3 Grid布局
Dec 20 HTML / CSS
html5 canvas 使用示例
Oct 22 HTML / CSS
程序设计HTML5 Canvas API
Apr 08 HTML / CSS
x-ua-compatible content=”IE=7, IE=9″意思理解
Jul 22 HTML / CSS
html5 的a标签 Href 拨电话的写法
Nov 04 HTML / CSS
html5的canvas元素使用方法介绍(画矩形、画折线、圆形)
Apr 14 HTML / CSS
关于解决iframe标签嵌套问题的解决方法
Mar 04 HTML / CSS
canvas 基础之图像处理的使用
Apr 10 HTML / CSS
10个很棒的 CSS3 开发工具 推荐
May 16 #HTML / CSS
IE下实现类似CSS3 text-shadow文字阴影的几种方法
May 11 #HTML / CSS
CSS3 Backgrounds属性相关介绍
May 11 #HTML / CSS
深入浅出CSS3 background-clip,background-origin和border-image教程
Jan 27 #HTML / CSS
css3 background属性调整增强介绍
Dec 18 #HTML / CSS
利用CSS3的checked伪类实现OL的隐藏显示的方法
Dec 18 #HTML / CSS
CSS3实战第一波 让我们尽情的圆角吧
Aug 27 #HTML / CSS
You might like
模拟OICQ的实现思路和核心程序(三)
2006/10/09 PHP
为查询结果建立向后/向前按钮
2006/10/09 PHP
php split汉字
2009/06/05 PHP
PHP连接SQLServer2005的实现方法(附ntwdblib.dll下载)
2012/07/02 PHP
php实现httpRequest的方法
2015/03/13 PHP
PHP整合七牛实现上传文件
2015/07/03 PHP
JavaScript 页面编码与浏览器类型判断代码
2010/06/03 Javascript
jQuery调用WebService的实现代码
2011/06/19 Javascript
javascript中字符串的定义示例代码
2013/12/19 Javascript
jquery遍历checkbox介绍
2014/02/21 Javascript
js实现图片点击左右轮播
2015/07/08 Javascript
一起学写js Calender日历控件
2016/04/14 Javascript
JQuery为元素添加样式的实现方法
2016/07/20 Javascript
connection reset by peer问题总结及解决方案
2016/10/21 Javascript
Cookies 和 Session的详解及区别
2017/04/21 Javascript
原生JS实现ajax与ajax的跨域请求实例
2017/12/01 Javascript
vue实现点击隐藏与显示实例分享
2019/02/13 Javascript
在js文件中引入(调用)另一个js文件的三种方法
2020/09/11 Javascript
python通过ElementTree操作XML获取结点读取属性美化XML
2013/12/02 Python
Python实现的下载网页源码功能示例
2017/06/13 Python
Python实现翻转数组功能示例
2018/01/12 Python
修复CentOS7升级Python到3.6版本后yum不能正确使用的解决方法
2018/01/26 Python
Python异常对代码运行性能的影响实例解析
2018/02/08 Python
Python将string转换到float的实例方法
2019/07/29 Python
python 消除 futureWarning问题的解决
2019/12/25 Python
Python切割图片成九宫格的示例代码
2020/03/10 Python
python使用Word2Vec进行情感分析解析
2020/07/31 Python
HTML5+CSS3应用详解
2014/02/24 HTML / CSS
是什么让J2EE适合用来开发多层的分布式的应用
2015/01/16 面试题
材料专业毕业生求职信
2014/02/26 职场文书
2014年安全生产责任书
2014/07/22 职场文书
城管执法人员纪律作风整顿思想汇报
2014/09/13 职场文书
行政执法队伍作风整顿个人剖析材料
2014/10/11 职场文书
业务员年终工作总结2015
2015/05/28 职场文书
Nginx实现高可用集群构建(Keepalived+Haproxy+Nginx)
2021/05/27 Servers
浅谈如何提高PHP代码质量之端到端集成测试
2021/05/28 PHP