<!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. Mysql数据库操作系统及配置参数优化

    数据库结构优化 表的水平拆分常用的水平拆分方法为:1.对 customer_id进行 hash运算,如果要拆分成5个表 则使用mod(customer_id,5)取出0-4个值2.针对不同的 hash ...

  2. 智能车学习（六）——OLED屏幕使用

    一.代码展示 1.头文件: #ifndef OLED_H_ #define OLED_H_ extern unsigned char Draw[]; extern const unsigned cha ...

  3. 【java基础】选择排序and冒泡排序

    前言 : 今天学习的是J2SE视频里的第五章,数组部分,它里面留了一个经典的作业,就是让我们去从1倒9按一定规格排序,这让我想起了学习vb的时候最最让我头疼的两种排序方法,选择排序法 和 冒泡排序法. ...

  4. hdu 2669 Romantic

    Romantic Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Submit Sta ...

  5. AOP动态代理解析5-cglib代理的实现

    CGLIB是一个强大的高性能的代码生成包.它广泛地被许多AOP的框架使用,例如Spring AOP和dynaop,为他们提供方法的Interception(拦截).EasyMock和jMock是通过使 ...

  6. 用脚本完成mysql工作

    1. 用mysql -e在脚本中执行mysql的sql语句 #!/bin/bash #simple mysql shell usage logtime=`date "+%Y-%m-%d&qu ...

  7. android studio手动加入jar包

    点击启动AndroidStudio,启动后的界面如图所示. 复制你需要添加的jar,并将其黏贴到app— —src— —main— —libs文件夹下,可运行的AndroidStudio项目都有像这样 ...

  8. App测试时,区分客户端或服务器端导致问题产生的方法

    1.先确定产生问题的地方是否与服务器产生交互/通信,若无则非服务器问题: 2.通过Fiddler抓包,查看操作时调用的服务器接口是否正常并检查对应返回值: 3.若接口返回值正常,则需查看客户端对业务的 ...

  9. C#生成PDF总结

    (一)C#生成PDF总结 (1)iTextSharp控件对iTextSharp研究还可以表格.文字.各种GDI对象,图片,水印,文字旋转(2)aspose的控件(3)PDF Library这个类库(只 ...

  10. jqgrid在colModel中多次调用同一个字段值

    Debug: 代码1: { name : 'input', index : 'input', width : 100, align : "center", formatter : ...