众所周知，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. gearman服务连接php java

    在实际工作中,会碰到两个问题 (1)现有系统想集成一个开发组件,而该组件的SDK却没有现有语言版本. (2)系统中的一项功能非常耗费资源,最好能利用其它机器来处理. 本文介绍gearman的使用,实现 ...

  2. VUE环境安装和创建项目

    1.首先要安装nodejs和npm. 下载nodejs安装,下载地址:https://nodejs.org/en/ 安装很简单一路next即可. 安装完成后可以在cmd窗口输入node -v 和 np ...

  3. C#中实现对象的深拷贝

    深度拷贝指的是将一个引用类型(包含该类型里的引用类型)拷贝一份(在内存中完完全全是两个对象,没有任何引用关系).......... 直接上代码: /// <summary> /// 对象的 ...

  4. Gogland配置- 修改Go源代码tab值

    Gogland对Go源代码默认值为8个,我很不习惯,第一次遇到tab数量这么大的,于是我决定修改这个tab值! 1,点击顶部菜单“File”->"Settings". 2,在 ...

  5. 有效单词词广场——算法面试刷题5（for google），考察数学

    给定一个单词序列,检查它是否构成一个有效单词广场.一个有效的单词广场应满足以下条件:对于满足0≤k<max(numRows numColumns)的k,第k行和第k列对应的字符串应该相同,. 给 ...

  6. Java50道经典习题-程序19 输入行数打印菱形图案

    题目:根据用户输入的行数打印菱形图案,若用户传入的是为偶数则提示用户重新输入,例如输入数字7打印出如下菱形图案   *  *** ************ *****  ***   *分析:先把图形分 ...

  7. 深入了解java虚拟机（JVM） 第九章 class文件结构及意义

    Class文件是访问jvm的重要指令,学习了class文件能够更加深入的了解jvm的工作过程.本文只进行概况总结,要进行更加详细的学习class文件,可以参考:https://blog.csdn.ne ...

  8. java的string和==和equals和hashcode简单理解

    String s1= "abc"; s1是引用变量,在栈里面,如果java的String常量池中没有abc,则开拓一块区域存abc,s1指向常量池中的abc: String s2= ...

  9. mxonline实战-1，创建应用及相应模型

        前言   环境说明:python3.5 + django2.0, 用的pycharm4.04专业版 课程视频地址 https://coding.imooc.com/learn/list/78. ...

  10. HEOI 十二省联考退役记

    Day -1 简要的说了些注意事项 一整天都在刷树套树的水题 退役的感觉近了 Day 0 早上收拾好东西去了火车站之后 火车站居然还没有开门 等了半天 我们是从衡水到德州再到秦皇岛 到了德州之后 去车 ...