<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. JMeter5.1开发SMTP协议接口脚本

    jmeter可以测试发邮件和读取邮件. 发送邮件 上图部分解释: Server:邮件发送服务 Port:发邮件端口,不加密25,加密465,如果是465端口,Security settings 需要选 ...

  2. VIJOS-P1146 宿舍里的故事之五子棋

    洛谷 P1479 宿舍里的故事之五子棋 洛谷传送门 JDOJ 1311: VIJOS-P1146 宿舍里的故事之五子棋 JDOJ传送门 题目描述 宿舍里好多好多有趣的事! 7890653今天看到不知何 ...

  3. java http get和post请求

    1.http工具类 package com.funshion.common.utils; import java.net.URI;import java.net.URL; import org.apa ...

  4. java 构造方法+this+super

     构造方法的格式: 修饰符 构造方法名(参数列表) { }  构造方法的体现: 构造方法没有返回值类型.也不需要写返回值.因为它是为构建对象的,对象创建完,方法就执行结束. 构造方法名称必须和类名保持 ...

  5. Layui 模板引擎中用了CheckBox，显示时没有样式

    渲染完成后,需要重新调用layui的方法. layui.form.render();

  6. ABP .net framework版 的发布

    先正常的发布流程走 特别的如下图

  7. [RN] React Native 使用 图片预览和放大 插件 react-native-image-zoom-viewer 过程中，放大报错问题

    React Native 使用 图片预览和放大 插件 react-native-image-zoom-viewer 过程中,放大报错问题 报错如下: Cannot record touch end w ...

  8. C# byte数组与16进制间的相互转换

      1.byte数组转16进制字符串 /// <summary> /// 将一个byte数组转换成16进制字符串 /// </summary> /// <param na ...

  9. 网卡监控脚本--nagios

    #!/usr/bin/python26#filename:check_traffic.py#the python script function  for monitoring network tra ...

  10. 使用stunnle加密传输

    Stunnel是一个可以用SSL对任意 TCP 连接加密的程序.它可以运行在多种UNIX和Windows上,它是基于 OpenSSL的,所以它要求已经安装了 OpenSSL,并进行了正确的配置.——来 ...