小tips: IE7,IE8浏览器纯CSS实现正圆角效果

这篇文章发布于 2016年07月6日,星期三,23:07,归类于 CSS相关。 阅读 76670 次, 今日 1 次 32 条评论

 

一、关于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浏览器下:
IE7浏览器下圆角

IE8浏览器下:
IE8浏览器下的圆角

补充于2016-07-13
有小伙伴评论反映IE8下不是正圆,然后,今天我特意打开10年前还是XP系统的笔记本,使用原生的IE8浏览器看了下,除了边缘糙了点以外,还是正圆,如下截图:
xp系统下原生IE8圆角效果

因此,反映IE8圆角不是正圆的小伙伴,可否提供更多的信息。例如,比方说操作系统,或者是否在IEtester类似软件中测试的等。

IE11下:
IE9浏览器下圆角

全兼容,效果棒棒哒!

实现原理:
IE9+使用border-radius:50%, IE7,IE8使用border模拟。

我们平常使用border-style一般都是solid实线,其他常用的还有dashed以及dotted,我们这里的主角就是dotted点,在IE浏览器下,dotted点是被渲染成正圆的,Chrome浏览器则是正方形。

上面demo,如果我们去掉父级的overflow,IE浏览器下就会这样:
四个点圆角

同等条件下的Chrome则是方点:
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浏览器这么折腾,是不划算的。

四、结束语

其实,有些字符放到足够大,也是个正圆。但是呢,字符的问题在于,受字体和系统的影响相当大,很难像素级精确定位。因此,不如这里的border模拟效果好。

母校进入了看海模式,我不开心了!

华中科技大学看海

你以为我是心疼被淹了吗?

不是,你想多了!我只是生气,为什么我呆的4年时间就没有被淹呢!!?你可知道,东九那条湖里养了多少大鱼吗?这一发大水,这鱼肯定往外跑啊,我就可以下水抓鱼顶生活费了呀!为什么这么好的事情我没遇到,没有天理啊!不开心了!

我抓鱼真的很厉害,为了证明不忽悠大家,特地从人人网找了张大学的图:
大学抓鱼

分享到:


发表评论(目前32 条评论)

  1. 南山老幺说道:

    在chrome下 美女这个p并没有让文字居中,而是靠下了

  2. Web前端之家说道:

    原生的IE8,是有严重锯齿的,感觉这个效果设计师很难接受,还是得用背景图

    • 前端小白说道:

      你可以把.dotted元素的宽高设置成父级宽100%,高度100%试一下,就不会出现锯齿了

  3. momo说道:

    要是想实现和在谷歌浏览器下圆的border-style是double的样式(就是圆外边还有一圈),该怎么弄呢?感觉按照这个原理是实现不了的呀

  4. cliens说道:

    挺好的,经常看

  5. 睿客网说道:

    为什么文字没有垂直居中,只有在ie7下居中了

  6. 小布说道:

    我用Chrome,火狐,Opera,IE浏览器都看了下!
    文字与圆形背景没有居中,
    我给text类选择器背景颜色看了下,结果是150*126大小的矩形,底部对齐。
    而且文字也没有与单行文本垂直居中。

  7. 小丁说道:

    你以为放张照片,手里拿条鱼,我们就会相信这是你抓的吗?太天真了,我们都会以为这是你买的.

  8. 小二说道:

    想请教下大神,为什么.radius类选择器的position要设置为绝对定位,这里的原理是?虽然知道positiion的4个属性值是什么,但对其更深的底层原理不是很懂,求指点。

    • 桥哥说道:

      设置绝对定位是为了让圆脱离文档流当作背景使用,否则在往里面添加元素的时候不是会被挤下去吗

  9. 说道:

    请教一下 ,例子中用来调试不同的浏览器 的那个软件是什么呀?

  10. 春和水水子说道:

    最后那张图片好可奈!!

  11. ie7支持,ie8没支持啊说道:

    ie7支持,ie8没支持啊

  12. middle.Lin说道:

    身为南方人 从未抓过鱼 无颜见江东父老

  13. Devin说道:

    1. 为什么不设置border-color, 设置color就可以?
    2. 为什么不只设置border-top:149px dotted就好了?

    .radius {
    position: absolute;
    width: 100%; height: 100%;
    border: 149px dotted;
    /* IE7,IE8圆尺寸要小1像素同时有1像素偏移 */
    margin: 0 0 1px 1px;
    color: #cd0000;
    }

  14. 第一个清晨说道:

    奇技淫巧

  15. 夜之听雨声说道:

    博主抓得一手好鱼,可诚心向你求教抓鱼

  16. 静听雨落说道:

    首先谢谢张含韵。其次今天刚用了下PIE.HTC,让其支持圆角。。。。

  17. himeko说道:

    请教下,博主调试ie的那工具叫啥子哟~

  18. 702017364说道:

    我以前也用过dotted,但最终被我抛弃了,不是因为使用麻烦,而是因为dotted在ie8中不是真正的圆,而是会产生四个角的圆

  19. 禾火说道:

    我很想说。。。自从前年d2看过你真人后,再对比你网站首页那个清秀的照片,我很想说,岁月无情。。。。(⊙o⊙)…

  20. meepo说道:

    徒手抓鱼! 牛掰

  21. bruce说道:

    哈哈,不知道大神会不会做鱼

  22. kang说道:

    抓鱼一手好技巧。学了很多奇技淫巧