IE7,IE8浏览器纯CSS实现正圆角效果
来源:互联网 发布:centos ntp服务器配置 编辑:程序博客网 时间:2024/06/05 18:03
一、关于IE7, IE8不支持CSS3 border-radius
CSS3 border-radius
可以轻易实现圆还有圆角效果,然而,需要IE9+浏览器才行。移动端自然不成问题,但是众多(尤其面向C侧)PC页面是至少需要兼容IE8的,那有没有什么办法可以让IE7, IE8也支持圆角呢?
很久很久以前介绍过一个名为PIE的东西可以实现IE7,IE8的圆角,是10年7月份写的一篇“PIE使IE支持CSS3圆角盒阴影与渐变渲染”(本文还有其他很多圆角方法介绍)。
其原理是利用的IE私有的behavior,本质上还是JS代码。
这里,给大家介绍一个使用纯CSS实现IE7,IE8浏览器正圆角的例子。
二、纯CSS实现IE7,IE8圆角
我们直接看demo,您可以狠狠地点击这里:IE7/IE8浏览器纯CSS实现圆角demo
结果,IE7浏览器下:
IE8浏览器下:
补充于2016-07-13
有小伙伴评论反映IE8下不是正圆,然后,今天我特意打开10年前还是XP系统的笔记本,使用原生的IE8浏览器看了下,除了边缘糙了点以外,还是正圆,如下截图:
因此,反映IE8圆角不是正圆的小伙伴,可否提供更多的信息。例如,比方说操作系统,或者是否在IEtester类似软件中测试的等。
IE11下:
全兼容,效果棒棒哒!
实现原理:
IE9+使用border-radius:50%
, IE7,IE8使用border
模拟。
我们平常使用border-style
一般都是solid
实线,其他常用的还有dashed
以及dotted
,我们这里的主角就是dotted
点,在IE浏览器下,dotted
点是被渲染成正圆的,Chrome浏览器则是正方形。
上面demo,如果我们去掉父级的overflow
,IE浏览器下就会这样:
同等条件下的Chrome则是方点:
于是,我们就可以利用这个圆实现我们想要的圆角效果。我们给一个父级元素,同尺寸,overflow:hidden
,只看见左上角那个圆,就可以实现我们想要的正圆效果了。
相关CSS代码如下:
.box { width: 150px; height: 150px; position: relative; /* 值显示左上角那个圆点 */ overflow: hidden;}.radius { position: absolute; width: 100%; height: 100%; border: 149px dotted; /* IE7,IE8圆尺寸要小1像素同时有1像素偏移 */ margin: 0 0 1px 1px; color: #cd0000;}
是不是很好理解。完整CSS和HTML代码参见demo。
其他说明
此方法并不适用于IE6浏览器,因为IE6浏览器下dotted
会按照dashed
虚线进行渲染,不是个圆。
三、此方法的不足
本文介绍的方法可以轻松实现一个圆效果,而且可以无缝全兼容。但是,不足在于只能实现个圆,如果你想实现任意大小的圆角效果,怎么说呢?理论上也是可以实现的,但是,需要很多个元素进行拼接。就是dotted
边框模拟小圆角,直线部分需要矩形进行拼接。但是,显然成本就很高了,在我看来,为了注定要淘汰的IE7,IE8浏览器这么折腾,是不划算的。
- 纯CSS让IE7/IE8浏览器实现正圆角效果
- IE7,IE8浏览器纯CSS实现正圆角效果
- IE7/IE8实现css圆角效果
- ie6 IE7 IE8 多浏览器css 写法
- 关于css部份技巧, div在IE6/IE7/IE8/FF 不同浏览器 中的效果兼容
- css技巧div在IE6/IE7/IE8/FF 不同浏览器 中的效果兼容
- 纯CSS实现DIV垂直居中效果(所有浏览器有效)
- IE6 IE7 IE8 FF浏览器的CSS兼容问题(转)
- 区分IE8/IE7/IE6及其他浏览器CSS
- ie6 ie7 ie8 共存以及Firefox浏览器CSS兼容写法
- CSS Hack浏览器兼容IE6+IE7+IE8+IE9+FF
- [CSS Hack]解決IE6、IE7、IE8、Firefox的浏览器兼容问题
- IE6 IE7 IE8 FF浏览器的CSS兼容问题探究
- CSS Hack浏览器兼容IE6+IE7+IE8+IE9+FF
- 区别FF,IE7,IE8,IE6浏览器的CSS hack
- ie6 IE7 IE8 多浏览器css兼容写法
- ie6 ie7 ie8 共存以及Firefox浏览器CSS兼容写法
- 浏览器兼容之IE6\IE7\IE8专用CSS样式
- ssm框架发送邮件
- 拖拽进度条组件API
- 欢迎使用CSDN-markdown编辑器
- SNMP 原理详解
- bug描述的标准
- IE7,IE8浏览器纯CSS实现正圆角效果
- 常用css选择器总结
- (项目笔记)jsp中的el表达式
- 点到三维网格最近边的距离
- memcached安装
- DTO和POJO实体类之间值映射
- UITableViewCell AutoLayout 动态行高
- Spring学习之Spring的整体架构
- 如何利用微博引流精准加粉?