<style>

            .circle {

                position: relative;

                box-sizing: border-box;

            }

            .big {

                width: 140px;

                height: 140px;

                border-radius: 50%;

                position: absolute;

                margin: auto;

                /*以下五个属性为水平垂直居中的方法*/

                left:;

                top: 200px;

                right:;

                bottom:;

                box-sizing: border-box;

            }

            .small {

                width: 136px;

                height: 136px;

                border: 10px solid #9DDBE8;

                border-radius: 50%;

                position: absolute;

                margin: auto;

                /*以下五个属性为水平垂直居中的方法*/

                left:;

                top: 200px;

                right:;

                bottom:;

                box-sizing: border-box;

                border-bottom-color: transparent;

            }

        </style>

    </head>

    <body>

        <div class="circle">

            <div class="big"></div>

            <div class="small"></div>

        </div>

    </body>

效果图：

43、css实现镂空半圆环的更多相关文章

  1. CSS制作镂空字体

    1.效果图 2.html内容: <!doctype html><html lang="en"><head> <meta charset=& ...

  2. 使用CSS sprites减少HTTP请求

    sprites是鬼怪,小妖精,调皮鬼的意思,初听这个高端洋气的名字我被震慑住了,一步步掀开其面纱后发觉很简单的东西,作用却很大 神马是CSS 小妖精 CSS sprites是指把网页中很多小图片(很多 ...

  3. CSS sprites减少HTTP请求

    使用CSS sprites减少HTTP请求   sprites是鬼怪,小妖精,调皮鬼的意思,初听这个高端洋气的名字我被震慑住了,一步步掀开其面纱后发觉很简单的东西,作用却很大 神马是CSS 小妖精 C ...

  4. 50个CSS技巧

    这里我工作中收集了10个很不错的CSS技巧,你可以用在你的项目上.它可以帮你很好地整理你的元素并让他们看起来蛮酷的.下面开始我们的内容,希望你会喜欢它.下面是我收集的CSS技巧,希望能帮助到你,感觉收 ...

  5. （转） 50个CSS技巧

    这里我工作中收集了10个很不错的CSS技巧,你可以用在你的项目上.它可以帮你很好地整理你的元素并让他们看起来蛮酷的.下面开始我们的内容,希望你会喜欢它.下面是我收集的CSS技巧,希望能帮助到你,感觉收 ...

  6. CSS 学习手册

    目录 CSS 简介 1.CSS 简介 CSS 概述 层叠次序 2.CSS 基础语法 CSS 语法 值的不同写法和单位 记得写引号 多重声明: 空格和大小写 3.CSS 高级语法 选择器的分组 继承及其 ...

  7. easyloader.js源代码分析

    http://www.cnblogs.com/jasonoiu/p/easyloader_source_code_analysis.html Jquery easyui是一个javascript UI ...

  8. 导航页的开发--手机web app开发笔记

    好了,的所有的基础知识已经准备完毕了,现在开始制作引导页.这个引导页需要一个HTML文件,JS文件,一个CSS文件.在HBuilderX中根目录下添加“Guid.html”,在JS文件夹添加“myth ...

  9. 【HTML】html5 canvas全屏烟花动画特效

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. oneinstack——证书更新

    如果你安装好 oneinstack 你的定时任务就会自动添加 "/root/.acme.sh"/acme.sh --cron --home "/root/.acme.sh ...

  2. 完美解决该死的ie6下select总是置于最上层bug

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  3. USACO Party Invitations

    洛谷 P3068 [USACO13JAN]派对邀请函Party Invitations 洛谷传送门 JDOJ 2343: USACO 2013 Jan Silver 3.Party Invitatio ...

  4. React的使用小规范----长期更新

    用this.state控制组件显示,用this.props控制页面业务数据,用this.other保存其他需要的属性,如计时器setInterval的id

  5. Pandas | GroupBy 分组

    任何分组(groupby)操作都涉及原始对象的以下操作之一: 分割对象 应用一个函数 结合的结果 在许多情况下,我们将数据分成多个集合,并在每个子集上应用一些函数.在应用函数中,可以执行以下操作: 聚 ...

  6. Pandas | 13 索引和选择数据

    Pandas现在支持三种类型的多轴索引; 编号 索引 描述 1 .loc() 基于标签 2 .iloc() 基于整数 3 .ix() 基于标签和整数 .loc() Pandas提供了各种方法来完成基于 ...

  7. vue之父子组件通信

    一. 父-子组件间通信 let children={    template:`<div><h1>{{send}}</h1></div>`,  # 将传 ...

  8. Linux/Unix 多线程通信

    线程间无需特别的手段进行通信,因为线程间可以共享数据结构,也就是一个全局变量可以被两个线程同时使用. 不过要注意的是线程间需要做好同步,一般用 mutex. 可以参考一些比较新的 UNIX/Linux ...

  9. 项目中常用的js方法封装---自留

    1.输入一个值,返回其数据类型 type = para => { return Object.prototype.toString.call(para).slice(8,-1) } 2.冒泡排序 ...

  10. kali linux 更换镜像源

    编辑sources.list文件 leafpad /etc/apt/sources.list #aliyun 阿里云 deb http://mirrors.aliyun.com/kali kali-r ...