CSS3.0中有一个border-radius属性,这个属性允许向 div 元素添加圆角边框,也就是div边角不再一直是直角,在CSS3.0中可以做成圆角了,所以我们可以用这个属性用div画一个圆,或者同心圆。

圆 代码:

<div style="width:100px; height:100px; border-radius:100px; background-color:#eeeef4;"></div>

同心圆代码:

<div style="width:200px; height:200px; background-color:#FF9; border-radius:200px; ">
    <div style="width:100px; height:100px; position:relative; top:25%; left:25%; border-radius:200px; background-color:#fff;"></div>
</div>

用CSS3.0画圆的更多相关文章

  1. css3.0

    css3.0相比css2.0多了些我们经常需要使用的标签属性,例如:圆角,个别圆角,不透明度,阴影特效等 1.圆角(即如何画圆)border-radius a{width:20px; height:2 ...

  2. 《图形学》实验六:中点Bresenham算法画圆

    开发环境: VC++6.0,OpenGL 实验内容: 使用中点Bresenham算法画圆. 实验结果: 代码: #include <gl/glut.h> #define WIDTH 500 ...

  3. ArcGIS JS 学习笔记2 实现仿百度的拖拽画圆

    一.前言 吐槽一下,百度在国内除了百度地图是良心产品外,其他的真的不敢恭维.在上一篇笔记里,我已经实现了自定义的地图测量模块.在百度地图里面(其他地图)都有一个周边搜索的功能,拖拽画一个圆,然后以圆半 ...

  4. canvas入门(画圆)

    1.想在H5上画一个canvas,必须在页面上你需要的地方添加canvas标签, <canvas id="myCanvas"></canvas>   接着需 ...

  5. 【openGL】画圆

    #include "stdafx.h" #include <GL/glut.h> #include <stdlib.h> #include <math ...

  6. javascript画直线和画圆的方法(非HTML5的方法)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 纯JS画点、画线、画圆的方法

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. OpenGL 3:画圆

    这次使用OpenGL画圆,而且中间画一个实心的五角星. 1. 画实心五角: 由于之前使用Polygen画会出现故障,或许是各个GPU硬件也会不一样的,所以使用Polygen画实心五角星并不可靠: 所以 ...

  9. OpenGL研究2.0 计算圆

    OpenGL研究2.0 计算圆 DionysosLai2014-06-18 在游戏中.常常有些地方涉及到一些圆的轨迹计算,例如一些转轴类的游戏,人物一般在角色转轴上面运动.这时,我们就要时刻计算角色的 ...

随机推荐

  1. C# 报警 控制蜂鸣器发声

    在C#中可以通过以下四种方式来实现蜂鸣或者报警,播放声音之类的功能.XP下对蜂鸣有用,win7下请接上扬声器. 1). Beep的报警实现 [c-sharp] view plaincopy     / ...

  2. 把UIImage保存到照片库和沙盒中

    1.保存到iOS照片库需要引入QuartzCore.framework框架,具体代码如下: .h文件 #import <QuartzCore/QuartzCore.h> UIImageVi ...

  3. fn project 数据库配置

    Databases We currently support the following databases and they are passed in via the DB_URL environ ...

  4. retful上传文件php的实现

    项目中要使用restful上传文件到服务器,一直不能成功,后生成相关串后在postman中上传成功,利用这个工具生成php curl的代码,后逐步比对产生以下代码. /**     * 上传文件    ...

  5. Eclipse使用EclEmma看单元测试的代码覆盖率

    在开发过程中,我们应该养成编写本地单元测试用例的好习惯,甚至做到测试驱动开发.EclEmma是Eclipse的一个插件,是一款测试用例的代码覆盖率统计工具,能明确到哪一行在测试过程中被调用到了.这里不 ...

  6. Oracle记录(四) 简单查询、限定查询、数据的排序

    一.简单查询 SQL(Structured Query Language) 结构化查询语言,是一种数据库查询和程序设计语言,用于存取数据以及查询.更新和管理关系数据库系统.ANSI(美国国家标准学会) ...

  7. You-Get 一键下载全网视频资源

      下载视频 无论是单纯的下载视频收藏,还是以便离线收看,都离不开“下载”,好的工具让你把注意力更好的放在视频的本身,而不用考虑要如何下载视频.下载视频从来不乏方法,之前也介绍了下载 Youtube ...

  8. FPGA论剑(续)

    25年之后,第二次华山论剑之时,天下第一的王重阳已然仙逝,郭靖少年英杰刚过二十岁,接东邪黄药师.北丐洪七公300招不败,二人默认郭靖天下第一.南帝段智兴因为出家,法号“一灯”,早已看破名利,故没有参加 ...

  9. windows抓包工具Wireshark(过滤)

    1.IP过滤 ip.src ==192.168.0.208(ip.src eq 192.168.0.208) //来源等于某个ip ip.dst ==192.168.0.208(ip.dst eq 1 ...

  10. 1092 To Buy or Not to Buy

    题意:给出两个字符串s1和s2(长度不超过1000),问s1是否包含s2中的所有字符,若包含,则输出Yes,并输出s1中多余的字符个数:若不完全包含,则输出No,并输出缺少的个数. 思路:定义数组in ...