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. 复制的web工程为什么不能部署到tomcat

    An existing resource has been found at location D:\apache-tomcat-6.0.18\apache-tomcat-6.0.18\webapps ...

  2. 【转】IUSR和IIS_IUSRS

    转自:http://blog.chinaunix.net/uid-20344928-id-3306130.html   概述   在早期的IIS版本中,随着IIS的安装,系统会创建一个IUSR_Mac ...

  3. Java知识点汇总

    Java中泛型的本质 Java中静态变量的适用场景 Java类加载原理及类加载器 Java中对Clone的理解 Java中HashMap的实现 Java中Collection和Collections的 ...

  4. phpcms文档

    http://www.phpcms.cn/doc/PHPCMSDocumentor/cache_module.html http://www.cnblogs.com/Braveliu/p/507493 ...

  5. Linux添加路由

    在Linux的VM中可以添加.删除路由. 中如图的拓扑结构中需要在中间的VM上添加路由,使最左边的VM和最右边的VM实现互通. 在这台VM上需要添加IP Forwarding的功能,在操作系统中也需要 ...

  6. 使用Collections类对 集合排序

    对Set<Object>集合进行排序 根据类型的某一个属性去排序 public Set<School> sortByValue(Set<School> set){ ...

  7. FPGA应用及ARM-FPGA架构举例

    FPGA的应用非常广泛,通信领域,视频图像处理领域,汽车电子领域,消费电子领域,工业领域,数据处理领域等,都能看到FPGA的身影. 在设计中,FPGA通常和其他处理IC架构,完成整个设计.FPGA-A ...

  8. Lagom production deployment

    tutorial:https://developer.lightbend.com/guides/lagom-kubernetes-k8s-deploy-microservices/ 一.harbor ...

  9. niosII SDRAM ,FLASH (学习特权)

    环境: quartus v13.0  64位. DE2 cycloneII EP2C35F672C6N (学校的开发板,还是想同学借的呵呵) 主要实现flash的烧录,虽然实现了但是还是有很多运气的成 ...

  10. Py修行路 python基础 (五)三元运算 字符编码 元组 集合 三级菜单优化!

    三元运算 条件判断不能加冒号: a=3 b=5 c=a if a<b else b oct() 转成八进制的简写:16进制 标志:BH为后缀或是0x为前缀hex() 转成16进制 元组 跟列表是 ...