众所周知，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. Open XML操作Excel导入数据

    项目中发现使用OleDb(using System.Data.OleDb)相关对象处理Excel导入功能,不是很稳定经常出问题,需要把这个问题解决掉.项目组提出使用OpenXML来处理Excel的导入 ...

  2. [JAVA]java复制文件的4种方式

    尽管Java提供了一个可以处理文件的IO操作类. 但是没有一个复制文件的方法. 复制文件是一个重要的操作,当你的程序必须处理很多文件相关的时候. 然而有几种方法可以进行Java文件复制操作,下面列举出 ...

  3. 针对SQLServer数据库的通用访问类

    Web.config中代码 <configuration> <connectionStrings> <add name="connString" co ...

  4. jdk-7u40-windows-i586的安装

    1.预备知识: i586 指的是windows 32bit版本 Oracle.微软.IBM这些大佬们最“贵族”了-----他们都很喜欢 C盘 2.关键 JDK必须装在C盘目录下,才能在命令行下正确运行 ...

  5. python中的基本数据类型(int,bool,str)及字符串操作

    一. 基本数据类型概况 1.  int 整数,主要用来进行数学运算 2.  str 字符串,可以保存少量数据并进行相应的操作 3.  bool 布尔值,判断真假,True,False 4.  list ...

  6. 基于scrapy-redis两种形式的分布式爬虫

    redis分布式部署 1.scrapy框架是否可以自己实现分布式? - 不可以.原因有二. 其一:因为多台机器上部署的scrapy会各自拥有各自的调度器,这样就使得多台机器无法分配start_urls ...

  7. MySQL数据库密码破解

    研究MySQL数据库的加解密方式,在网络攻防过程中具有重要的意义:试想一旦获取了网站一定的权限后,如果能够获取MySQL中保存用户数据,通过解密后,即可通过正常途径来访问数据库:一方面可以直接操作数据 ...

  8. WinForm程序运行 Just-In-Time Exception发生时

    debug时运行正常, 但exe程序却发生Just-In-Time Exception (具体是做了异步里面更新画面内容) 解决对策: [app.config]文件: jitDebugging设为tu ...

  9. Vmware下Kali设置桥接网络无法上网

    1.检查是否设置桥接 2.编辑>首选项>虚拟网络编辑器>选对本机上网的网卡 3.检查上网的网卡>适配器属性栏有没有 Vmware Bridge Protocol 桥接的服务. ...

  10. 如何检查 IP是否冲突了

     [root@TEST_192_168_1_252 ~]# ifconfig eth0      Link encap:Ethernet  HWaddr 44:A8:42:00:1A:B5       ...