<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

    .box{

        margin:300px;

        position:relative;

    }

    .box1 {

            width:100px;

            height:100px;

            background-color:transparent;

            border:3px solid #F00;

            border-radius:60px;

            margin-top:20px;

        }

        .box2 {

            width:60px;

            height:60px;

            background-color:#fff;

            z-index:1;

            border-radius:45px;

            position:absolute;

            top:0;

            left:80px;

        }

    </style>

</head>

<body>

<div class="box">

    <div class="box1"></div>

    <div class="box2"></div>

</div>

</body>

</html>

效果图：

用css3实现一个带缺口的圆圈（图）的更多相关文章

  1. 用CSS画一个带阴影的三角形的示例代码

    1. 思路 怎么用CSS3画一个带阴影的三角形呢 ? 有童鞋说, 这还不简单吗 网上有很多解决方案, 但其实大多都是实现不太完美的, 存在一些问题 假设我们做一个向下的三角形箭头 常见的方法大致有两种 ...

  2. 创建一个带模版的用户控件 V.3

    再重构此篇<创建一个带模版的用户控件  V.2>http://www.cnblogs.com/insus/p/4164149.html 让其它动态实现header,Item和Footer. ...

  3. 创建一个带模版的用户控件 V.2

    前面有做练习<创建一个带模版的用户控件>http://www.cnblogs.com/insus/p/4161544.html .过于简化.通常使用数据控件Repeater会有网页写好He ...

  4. QT模态对话框用法（在UI文件中设置Widget背景图，这个图是一个带阴影边框的图片——酷）

    QT弹出模态对话框做法: 1.新建UI文件时,一定要选择基类是QDialog的,我的选择是:Dialog without Buttons(),如下图: 2.然后在使用的时候: MyDialog dlg ...

  5. 如何编写一个带命令行参数的Python文件

    看到别人执行一个带命令行参数的python文件,瞬间觉得高大上起来.牛逼起来,那么如何编写一个带命令行参数的python脚本呢?不用紧张,下面将简单易懂地让你学会如何让自己的python脚本,支持带命 ...

  6. Java基础---Java---IO流-----File 类、递归、删除一个带内容的目录、列出指定目录下文件夹、FilenameFilte

    File 类 用来将文件或者文件夹封装成对象 方便对文件与文件夹进行操作. File对象可以作为参数传递给流的构造函数 流只用操作数据,而封装数据的文件只能用File类 File类常见方法: 1.创建 ...

  7. 写一个带文本菜单的程序,菜单项如下 (1) 取五个数的和 (2) 取五个数的平均值 (X) 退出。

    问题: 写一个带文本菜单的程序,菜单项如下(1)    取五个数的和 (2)     取五个数的平均值(X)    退出. 由用户做一个选择, 然后执行相应的功能.当用户选择退出时程序结束. 实现: ...

  8. 收藏一个带动画效果的ScrollViewer以及ScrollBar的模板

    这里介绍一个带动画效果的ScrollViewer和ScrollBar,总共分为两个资源字典,直接拿来引用即可: 1 ScrollBarStyle.xaml <ResourceDictionary ...

  9. 使用jQuery和CSS3实现一个数字时钟

    点击进入更详细教程及源码下载     在线演示 我们经常会在网站中看见一个时钟的效果.今天向大家分享一个使用jQuery和CSS3实现一个数字时钟教程. http://www.html5cn.org/ ...

随机推荐

  1. PMP 第三章 单个项目的项目管理标准

    1 项目管理五大过程组分别是什么? 启动过程组 规划过程组 执行过程组 监控过程组 收尾过程组 2 启动项目组是干什么?包含哪些过程?每个阶段都需要启动吗? 启动过程组:获得授权,定义一个新项目或现有 ...

  2. dwz中权限的控制

    很多人不明白用dwz要如何在没有登录的时候跳转到登录页面,没有权限的时候弹出提示. 其实,作者在设计的时候,已经完全考虑到了这些需求. 不管是navTab还是dialog,dwz的页面加载最终都是通过 ...

  3. LeetCode——Single Number（找出数组中只出现一次的数）

    问题: Given an array of integers, every element appears twice except for one. Find that single one. No ...

  4. 硬件断点 DrxHook

    硬件断点 DrxHook 硬件断点的实现需要依赖于调试寄存器 DR0~DR7  调试寄存器 DR0~DR3-----调试地址寄存器DR4~DR5-----保留DR6 -----调试状态寄存器 指示哪个 ...

  5. 开始我的PostgreSQL的学习之旅

    经过这么长时间的学习,终于确定了我的研究方向是PostgreSQL的空间数据库的设计流程,具体怎样实现这个过程,其难度是挺大的,我必须克服掉,尽量得往前看.大家有相同的研究方向的,可以一同来学习,相互 ...

  6. vs2015 MFC工程添加消息响应函数

    真不知道这PPT怎么描述的..最后窝找到了解决方法如上图.. 下次找MSDN解决问题好了..而且我们并不知道他所说的这个IDE到底是哪个厂商哪个版本的IDE这就很困惑 不过呢..它主要是让我们添加消息 ...

  7. 一定要学会paxos算法！

    paxos算法 http://blog.csdn.net/dellme99/article/details/14162159

  8. nginx日志中文变成类似\xE9\xA6\x96\xE9\xA1\xB5-\xE6\x8E\xA8\xE8\x8D\x90的东西,治本方案

    这里:https://groups.google.com/forum/#!topic/openresty/NcRSb5gTmVU 主要是: 这与 ngx_lua 无关,是较新的 nginx 核心引入的 ...

  9. HDU 3461 Code Lock（并查集）

    很好的一个题,思想特别6 题意:给你小写字母个数n,每个字母可以向上翻动,例如:d->c,a->z.然后给你m对数(L,R)(L<=R),表示[L,R]之间可以同时向上翻动,且翻动后 ...

  10. HTML meta viewport属性说明(mark)

    什么是Viewport 手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中,通常这个虚拟的“窗口”(viewport)比屏幕宽,这样就不用把每个网页挤 到很小的窗口中(这样会破坏没有针对手 ...