众所周知，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. PHP爬虫（3）PHP DOM开源代码里的大坑和字符编码

    一.开源代码的问题 在PHP爬虫(2)中介绍了开源工程Sunra.PhpSimple.HtmlDomParser.在实际工作中发现一个问题,例如http://www.163.com的网页数据怎么也抓取 ...

  2. cesium随笔 — 获取当前鼠标的经度、纬度、高度

    代码: function getPosition() { //得到当前三维场景 var scene = viewer.scene; //得到当前三维场景的椭球体 var ellipsoid = sce ...

  3. C#基础笔记(第二十二天)

    1.单例模式1)将构造函数私有化2)提供一个静态方法,返回一个对象3)创建一个单例 2.XML可扩展的标记语言 HTMLXML:存储数据 不是单独.net的东西,是一个单独的,JAVA什么的都也用不需 ...

  4. RabbitMq初探——消息确认

    消息确认机制 前言 消息队列的下游,业务逻辑可能复杂,处理任务可能花费很长时间.若在一条消息到达它的下游,任务刚处理了一半,由于不确定因素,下游的任务处理进程 被kill掉啦,导致任务无法执行完成.而 ...

  5. Code Chef February Challenge 2019题解

    传送门 \(HMAPPY2\) 咕 话说这题居然卡\(scanf\)的么??? int T;cin>>T; while(T--){ cin>>n>>a>> ...

  6. Vulnhub Acid

    1.信息收集 1.1.netdiscover netdiscover -i eth0 -r 192.168.118.0/24 1.2. Nmap nmap -sP -T4 192.168.118.0/ ...

  7. 【vue】——CDN或全局引入CSS、JS。

    在入口文件index.html中添加 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  8. 知名协作工具 Slack 换新 logo 啦！

    简评:本文系译文.Slack 在自家 Blog 上解释了新的设计 -- 旧版的 logo 有 11 种颜色,在非白色背景的情况下,logo 不仅难看,而且很容易在多个地方上表现不一致. 新年换新装,S ...

  9. docker微服务部署之：五、利用DockerMaven插件自动构建镜像

    docker微服务部署之:四.安装docker.docker中安装mysql和jdk1.8.手动构建镜像.部署项目 在上一篇文章中,我们是手动构建镜像,即: 4.1.2.5.1.2.6.1.2中的将d ...

  10. Tomcat 基础优化

    作者:北京运维 本文档是身边一些朋友.技术大佬之前分享的一些笔记,记录了 Tomcat 优化方法,笔记较多而且比较杂乱,经过整理.分类我个人觉得大致可以从以下几个方面优化 Tomcat: Tomcat ...