<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. Chrome插件中 popup,background,contentscript消息传递机制

    https://blog.csdn.net/summerxiachen/article/details/78698878 popup不能接收到contentscript 发送的消息, 如果这时cont ...

  2. 【CSP-S膜你考】不怕噩梦 （模拟）

    不怕噩梦 题面 蚊子最近经常做噩梦,然后就会被吓醒.这可不好.. 疯子一直在发愁,然后突然有一天,他发现蚊子其实就是害怕某些事. 如果那些事出现在她的梦里,就会害怕. 我们可以假定那个害怕的事其实是一 ...

  3. kali linux 更换镜像源

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

  4. python3 mqtt 添加用户名以及密码

    import paho.mqtt.client as mqtt client = mqtt.Client(client_id, transport='tcp') client.username_pw_ ...

  5. vb.net 读取 excel

    Dim myConn AsNew ADODB.Connection myConn.CursorLocation = ADODB.CursorLocationEnum.adUseClient '   用 ...

  6. AQS源码的简单理解

    概念 AQS全称 AbstractQueuedSynchronizer. AQS是一个并发包的基础组件,用来实现各种锁,各种同步组件的.它包含了state变量.加锁线程.等待队列等并发中的核心组件. ...

  7. npm和yarn设置镜像源

    npm 设置为淘宝源 npm config set registry https://registry.npm.taobao.org 使用nrm管理 nrm: npm registry manage ...

  8. 【操作系统之七】Linux常用命令之tail

    一.概念linux tail命令用途是按照要求将指定的文件的最后部分输出到标准设备,一般是终端,就是把某个档案文件的最后几行显示到终端上,如果该档案有更新,tail会自动刷新,确保你看到最新的档案内容 ...

  9. NeuCF源码中用到的模块（函数）

    论文:<Neural Collaborative Filtering>源码中用到的模块(函数) from keras.layers import Embedding, Input, Den ...

  10. Thinkphp中的系统变量

    Action中使用的系统常量 THINK_PATH // ThinkPHP 系统目录 APP_PATH // 当前项目目录 APP_NAME // 当前项目名称 MODULE_NAME //当前模块名 ...