用css3实现一个带缺口的圆圈（图）
<!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实现一个带缺口的圆圈（图）的更多相关文章
- 用CSS画一个带阴影的三角形的示例代码
1. 思路 怎么用CSS3画一个带阴影的三角形呢 ? 有童鞋说, 这还不简单吗 网上有很多解决方案, 但其实大多都是实现不太完美的, 存在一些问题 假设我们做一个向下的三角形箭头 常见的方法大致有两种 ...
- 创建一个带模版的用户控件 V.3
再重构此篇<创建一个带模版的用户控件 V.2>http://www.cnblogs.com/insus/p/4164149.html 让其它动态实现header,Item和Footer. ...
- 创建一个带模版的用户控件 V.2
前面有做练习<创建一个带模版的用户控件>http://www.cnblogs.com/insus/p/4161544.html .过于简化.通常使用数据控件Repeater会有网页写好He ...
- QT模态对话框用法（在UI文件中设置Widget背景图，这个图是一个带阴影边框的图片——酷）
QT弹出模态对话框做法: 1.新建UI文件时,一定要选择基类是QDialog的,我的选择是:Dialog without Buttons(),如下图: 2.然后在使用的时候: MyDialog dlg ...
- 如何编写一个带命令行参数的Python文件
看到别人执行一个带命令行参数的python文件,瞬间觉得高大上起来.牛逼起来,那么如何编写一个带命令行参数的python脚本呢?不用紧张,下面将简单易懂地让你学会如何让自己的python脚本,支持带命 ...
- Java基础---Java---IO流-----File 类、递归、删除一个带内容的目录、列出指定目录下文件夹、FilenameFilte
File 类 用来将文件或者文件夹封装成对象 方便对文件与文件夹进行操作. File对象可以作为参数传递给流的构造函数 流只用操作数据,而封装数据的文件只能用File类 File类常见方法: 1.创建 ...
- 写一个带文本菜单的程序,菜单项如下 (1) 取五个数的和 (2) 取五个数的平均值 (X) 退出。
问题: 写一个带文本菜单的程序,菜单项如下(1) 取五个数的和 (2) 取五个数的平均值(X) 退出. 由用户做一个选择, 然后执行相应的功能.当用户选择退出时程序结束. 实现: ...
- 收藏一个带动画效果的ScrollViewer以及ScrollBar的模板
这里介绍一个带动画效果的ScrollViewer和ScrollBar,总共分为两个资源字典,直接拿来引用即可: 1 ScrollBarStyle.xaml <ResourceDictionary ...
- 使用jQuery和CSS3实现一个数字时钟
点击进入更详细教程及源码下载 在线演示 我们经常会在网站中看见一个时钟的效果.今天向大家分享一个使用jQuery和CSS3实现一个数字时钟教程. http://www.html5cn.org/ ...
随机推荐
- phpcms v9 常用调用标签（全）
本文介绍phpcms v9中模板标签使用说明. {template ) {==} {/,,)} loop是data的时候用{thumb($v[thumb],,)} 分页标签------{$ ...
- 关于转换大写中文金额-新学的java函数整理
toCharArray public char[] toCharArray() 将此字符串转换为一个新的字符数组. 返回: 一个新分配的字符数组,它的长度是此字符串的长度,而且内容被初始化为包含此字符 ...
- DOM兼容
-firstChild firstElementChild var oFirst = oUl.firstChild || oUl.firstElementChild; -lastChild la ...
- LOAD和PigStorage的一些测试例子 (转)
原地址:http://f.dataguru.cn/thread-233064-1-1.htm 因为理解上的错误,在这里被搞糊涂了.通过做测试,应该算是澄清了,所以写出来. 假设有个文件叫test,该文 ...
- LoadRunner参数化之数据生成方式
一般需要使用多条数据来完成实际事务的时候,需要参数化.而使用参数化可以方便实现很多实际事务,记得在哪里看到过,参数化是比C函数更高级的函数. 参数化的方法 先来个最常见的LR示例的登录脚本: Acti ...
- Sigar介绍与使用
Sigar是Hyperic-hq产品的基础包,是Hyperic HQ主要的数据收集组件.它用来从许多平台收集系统和处理信息. 这些平台包括:Linux, Windows, Solaris, AIX, ...
- CSS3鼠标悬停图片动画
鼠标放到图片上后: demo地址:demo div: <div class="wai"> <a href="#"> <div cl ...
- node.js整理 07例子
需求 一个简单的静态文件合并服务器,该服务器需要支持类似以下格式的JS或CSS文件合并请求. http://assets.example.com/foo/??bar.js,baz.js 在以上URL中 ...
- UVa12298 Super Poker II（母函数 + FFT）
题目 Source http://acm.hust.edu.cn/vjudge/problem/23590 Description I have a set of super poker cards, ...
- ACdream1157 Segments（CDQ分治 + 线段树）
题目这么说的: 进行如下3种类型操作:1)D L R(1 <= L <= R <= 1000000000) 增加一条线段[L,R]2)C i (1-base) 删除第i条增加的线段, ...