<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. django 解析上传xls文件

    1.解析上传数据 class DataUploadAPIView(APIView): # authentication_classes = (JSONWebTokenAuthentication, S ...

  2. 洛谷 p3870 开关 线段树模板

    这两天学了很长时间于是做了一道水题 我就用了模板,就连任何优化都没有 就AC了,复杂度也很爆炸10个点1500多毫秒 这个题就是把lazy[]改成记录下修改的次数,每次修改的时候mod 2,因为反过来 ...

  3. 数学建模之Python操作csv文件

    1.用Python通过csv文件里面的某一列,形成键值,然后统计键在其他列出现的次数. import pandas as pd import numpy as np import csv import ...

  4. 09-排序3 Insertion or Heap Sort (25 分)

    According to Wikipedia: Insertion sort iterates, consuming one input element each repetition, and gr ...

  5. 为什么需要动态SQL

    为什么需要动态SQL 在使用EF或者写SQL语句时,查询条件往往是这样一种非常常见的逻辑:如果客户填了查询信息,则查询该条件:如果客户没填,则返回所有数据. 我常常看到很多人解决这类问题时使用了错误的 ...

  6. 基于ELK 7.50搭建elastalert 监控报警和权限控制

    ELK+监控报警全步骤 需求: 公司要求对出在windows服务器上的日志进行日志分析并根据关键字进行报警,并配置kibana权限控制.下面为详细步骤 环境: centos 7.6 elk版本7.50 ...

  7. PHP重命名文件夹下的文件后缀名

    PHP重命名文件夹下的文件后缀名<pre> public function zhuanhouzuiming(){ $lujings='upload/'; $filesnames = sca ...

  8. [转帖]来聊聊，华为与H3C（华三）的前世今生！

    本篇,是以真实事件改编,将以故事篇的方式呈现出来. 本故事将分为两个篇幅讲述. 在中国的网络通信设备市场,有两个华字辈的选手,一名叫“华为技术有限公司”,另一名叫“杭州华三通信技术有限公司”. 这两个 ...

  9. 25个强大的CSS代码，据说这些是开发者经常遇到比较棘手的代码

    这些代码是经常用到的,比方说一些特殊的效果,圆角边框,CSS透明度,梯形环绕,CSS小三角等,希望对你有用 1简单又好的 Blockquote 样式 CSS代码如下 blockquote { back ...

  10. Springboot Actuator之九：actuator jmx endpoint

    1.配置 endpoints.jmx.domain: myapp endpoints.jmx.uniqueNames: true endpoints.auditevents.enabled: true ...