众所周知，IE7，8不支持border-radius效果。但我们同样有办法用css实现这个效果，方法就是用border来模拟。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        div{

            position: relative;

            width: 150px;

            height: 150px;

            line-height: 150px;

            overflow: hidden;

        }

        .radius{

            position: absolute;

            width: 100%;

            height: 100%;

            margin: 0 0 1px 1px;

            /*现代浏览器就使用border-radius*/

            border-radius: 50%;

            /*IE7,8就使用border来模拟*/

            border: 149px dotted;

            border-width: 0vw;

            margin: 0vw;

            color: #cd0000;

            background-color: currentColor;

        }

        .text{

            position: relative;

            text-align: center;

            color: #fff;

            font-size: 24px;

            margin: 0;

        }

    </style>

</head>

<body>

    <div>

        <p class="radius"></p>

        <p class="text">kobe</p>

    </div>

</body>

</html>

vw单位可能大家用的比较少，因为这个单位是IE9+才支持，所以现代浏览器直接把边框设为0vw，就表示无边框，直接使用border-radius，而IE7,8则使用border来模拟。

具体可查看这里

IE7,8纯css实现圆角效果的更多相关文章

  1. 利用target的特性，可以实现纯css的tab效果切换

    基础知识: :target起作用的是href连接到的位置 如 <a href="#tab1">tab1</a> <div id="tab1& ...

  2. 纯 CSS 实现波浪效果！

    一直以来,使用纯 CSS 实现波浪效果都是十分困难的. 因为实现波浪的曲线需要借助贝塞尔曲线. 而使用纯 CSS 的方式,实现贝塞尔曲线,额,暂时是没有很好的方法. 当然,借助其他力量(SVG.CAN ...

  3. 纯css实现幻灯片效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

  4. 纯css做幻灯片效果

    css3里面有一个@keyframes动画功能. w3c上面的例子: 可以使用它来做一个幻灯片效果. <!DOCTYPE html> <html lang="en" ...

  5. 纯css实现打字效果

    概述 很早以前就在别人的博客上面看到打字动画了,觉得非常炫酷,以为是用js做的,找了半天也没找到js在哪里.今天看<css揭秘>,碰巧看到书上打字动画的实现了,而且是纯css实现的!我参考 ...

  6. css实现圆角效果

    源码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> & ...

  7. HTML5 CSS3专题 纯CSS打造相册效果

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/30993277 今天偶然发现电脑里面还有这样的一个例子,感觉效果还不错,不记得啥时 ...

  8. 使用纯css实现波浪效果

    有时候我们需要实现水晃动的效果,其实我们可以通过css旋转动画和圆角来实现. 首先来2个div,外层div相对定位,内层div绝对定位,内层div大致位于外层div上半部分.外层div设置一个颜色较深 ...

  9. 纯CSS实现JS效果研究

    利用CSS3:checked选择器和~配合实现tab切换 效果: 代码: <style> body,div,input,label{ margin:0; padding:0; } #tab ...

随机推荐

  1. VR与AR的发展趋势分析

    概要 你是否想象过与神秘的深海生物近距离接触?你是否梦想过穿戴钢铁侠那样的超先进科技装备成为超级英雄?你又是否幻想过与梦中的女神面对面的交流?这些可能在以前都只能是存在于脑海中的幻想,可是在如今有一项 ...

  2. C#发送邮件（使用SSL,587端口）

    static readonly string smtpServer = System.Configuration.ConfigurationManager.AppSettings["Smtp ...

  3. WPF透明窗体不支持缩放解决方案

    方案一 WPF中的无边框透明窗体,由于没有边并且透明,窗体无法进行缩放操作,今天来讲解如何解决这个问题. 先说一下思路,我们先手为该窗体添加4个边,4个角用于缩放操作,然后再为他们写事件,完成拖放操作 ...

  4. .Net生成导出Excel

    概述 在做.Net web开发的过程中经常需要将查出的数据导成Excel表返给用户,方便用户对数据的处理和汇总.这里我将导出Excel表格的代码做一个总结,这也是我项目中经常用到的,代码简单易懂,使用 ...

  5. HBase – 探索HFile索引机制

    本文由  网易云发布. 作者: 范欣欣 本篇文章仅限内部分享,如需转载,请联系网易获取授权. 01 HFile索引结构解析 HFile中索引结构根据索引层级的不同分为两种:single-level和m ...

  6. 1416: Kick Ass Biu [几何]

    点击打开链接 1416: Kick Ass Biu [几何] 时间限制: 1 Sec 内存限制: 128 MB 提交: 174 解决: 35 统计 题目描述 在玩Kick Ass的时候,可以发现子弹的 ...

  7. php-fpm 和 nginx 的两种通信方式

    在 linux 中,nginx 服务器和 php-fpm 可以通过 tcp socket 和 unix socket 两种方式实现. 一下内容转自:https://blog.csdn.net/qq62 ...

  8. lucene索引的更新和删除

    索引的删除: IndexReader和IndexWriter都由删除索引的功能,但这两者是有区别的, 使用IndexReader删除索引时,索引会马上被删除,其有两种方法,可以删除索引deleteDo ...

  9. Java初学者的学习路线建议

    java学习这一部分其实也算是今天的重点,这一部分用来回答很多群里的朋友所问过的问题,那就是我你是如何学习Java的,能不能给点建议?今天我是打算来点干货,因此咱们就不说一些学习方法和技巧了,直接来谈 ...

  10. 浅谈javascript和python语言的深拷贝

    深拷贝: 之前在开发中我遇到一个很大的bug,经过我多次调试之后我发现原本应该有保存数据的地方数据全部被清空,仔细一看发现原来是被人为删除,明明操作的是一个副本,为什么原本也会跟着一起被删除呢?经过了 ...