让IE浏览器支持CSS3圆角的方法
解压后,打开test.html,如果显示效果是圆角,则可以继续。
使用演示:
.main{
border: 2px solid #C0C0C0;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
position:relative;
z-index:2;
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个值,为“上 右 下 左”。
最新文章
- redis 配置
- SwipeBackActivity 的使用
- 1531: [POI2005]Bank notes二进制优化(c++)
- (基础篇)PHP与Web页面交互
- 25个CSS3 渐变和动画效果教程
- PHPCMS v9栏目添加字段及描述编辑器修改方法
- css font的简写规则
- 以下是jQuery和JavaScript实现相同操作的等价代码。
- remove()和直接使用system的一个差别
- Photon + Unity3D 在线游戏开发 学习笔记(两)
- Python Nose框架编写测试用例方法
- 听翁恺老师mooc笔记(1)--为何选择学习C
- jquery性能优化的38个建议
- Android Studio 代码无提示,无颜色区分
- 比原链(Bytom)先知节点 Ubuntu接入文档
- BF匹配器
- html5-css列表和表格
- 51nod 1020 逆序排列
- 【 js 基础 】【读书笔记】Javascript “继承”
- git分支 远程协作
热门文章
- MySQL在windows和linux下的表名大小写问题
- linux命令中 rpm –qa|grep softname的含义
- 使用JS动态创建含有1000行的表格
- ANDROID_MARS学习笔记_S01_009Relative_LAYOUT例子
- JS中的自执行函数
- Memcache+Cookie解决分布式系统共享登录状态------------------------------Why Memcached?
- 条件与(&;&;)和逻辑与(&;)以及条件或(||)和逻辑或(|)区别
- 到底怎么样才叫看书?——Tony Zhao's
- C# CLR及程序集部署浅析
- fiddler代理