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 28 HTML / CSS
一款纯css3实现的鼠标悬停动画按钮
Dec 29 HTML / CSS
实例讲解CSS3中的border-radius属性
Aug 18 HTML / CSS
css3media响应式布局实例
Jul 08 HTML / CSS
纯CSS3+DIV实现小三角形边框效果的示例代码
Aug 03 HTML / CSS
html5/css3响应式页面开发总结
Oct 16 HTML / CSS
详解Canvas 实现炫丽的粒子运动效果(粒子生成文字)
Feb 01 HTML / CSS
利用html5的websocket实现websocket聊天室
Dec 12 HTML / CSS
深入浅析HTML5中的article和section的区别
May 15 HTML / CSS
使用CSS实现小三角边框原理解析
Nov 07 HTML / CSS
css3 选择器
May 11 HTML / CSS
解决flex布局中子项目尺寸不受flex-shrink限制
May 11 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
php 用sock技术发送邮件的函数
2007/07/21 PHP
php结合表单实现一些简单功能的例子
2011/06/04 PHP
twig模板获取全局变量的方法
2016/02/05 PHP
php使用PDO获取结果集的方法
2017/02/16 PHP
javascript 命名空间以提高代码重用性
2008/11/13 Javascript
javascript实现youku的视频代码自适应宽度
2015/05/25 Javascript
js带前后翻页的图片切换效果代码分享
2015/09/08 Javascript
JS实现双击屏幕滚动效果代码
2015/10/28 Javascript
JS弹出窗口插件zDialog简单用法示例
2016/06/12 Javascript
原生JS实现网络彩票投注效果
2016/09/25 Javascript
在Swiper内如何制作CSS3动画效果示例代码
2017/12/07 Javascript
JS实现在文本指定位置插入内容的简单示例
2017/12/22 Javascript
React 组件间的通信示例
2018/06/14 Javascript
vue项目中仿element-ui弹框效果的实例代码
2019/04/22 Javascript
详解微信小程序网络请求接口封装实例
2019/05/02 Javascript
微信小程序 如何获取网络状态
2019/07/26 Javascript
Vue通过Blob对象实现导出Excel功能示例代码
2020/07/31 Javascript
[02:21]2018完美盛典章节片——初心
2018/12/17 DOTA
Django框架中render_to_response()函数的使用方法
2015/07/16 Python
TensorFlow如何实现反向传播
2018/02/06 Python
python多进程实现文件下载传输功能
2018/07/28 Python
Python----数据预处理代码实例
2019/03/20 Python
详解Python locals()的陷阱
2019/03/26 Python
Python使用Slider组件实现调整曲线参数功能示例
2019/09/06 Python
python 基于opencv 绘制图像轮廓
2020/12/11 Python
matplotlib绘制鼠标的十字光标的实现(自定义方式,官方实例)
2021/01/10 Python
通过Canvas及File API缩放并上传图片完整示例
2013/08/08 HTML / CSS
Opodo意大利:欧洲市场上领先的在线旅行社
2019/10/24 全球购物
印度第一网上礼品店:IGP.com
2020/02/06 全球购物
程序员经常用到的UNIX命令
2015/04/13 面试题
怎样有效的进行自我评价
2013/10/06 职场文书
日本语毕业生自荐信
2014/02/01 职场文书
前处理班长职位说明书
2014/03/01 职场文书
财务审计整改报告
2014/11/06 职场文书
2014年保安个人工作总结
2014/11/13 职场文书
2015年全民创业工作总结
2015/07/23 职场文书