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. np基本函数大全

    Numpy是科学计算库,是一个强大的N维数组对象ndarray,是广播功能函数.其整合C/C++.fortran代码的工具 ,更是Scipy.Pandas等的基础 .ndim :维度 .shape : ...

  2. Win32 API中使用定时器的三种方法

    转自:http://blog.csdn.net/fancycow/article/details/6676064 1.SetTimer(HWND,UINT,UINT,TIMERPROC);第一个参数设 ...

  3. 洛谷P1119 灾后重建

    传送门 题目大意:点被破坏,t[i]为第i个点修好的时间,且t[1]<t[2]<t[3].. 若干询问,按时间排序,询问第t时刻,u,v的最短路径长度. 题解:floyed 根据时间加入点 ...

  4. Java Config 注解

    java config是指基于java配置的spring.传统的Spring一般都是基本xml配置的,后来spring3.0新增了许多java config的注解,特别是spring boot,基本都 ...

  5. throw、try 和 catch

    try 语句允许我们定义在执行时进行错误测试的代码块. catch 语句允许我们定义当 try 代码块发生错误时,所执行的代码块. JavaScript 语句 try 和 catch 是成对出现的. ...

  6. push()、shift()与pop()、unshift()、splice()

    1.末端的添加和移除:push()是用来在数组末端添加项,pop()在数组末端移除项: 2.前端的添加和移除:shift()在移除数组的第一个项(前端),unshift()在数组前端添加项: 3.pu ...

  7. 为什么中国出不了facebook和Twitter?

    我们坐拥全球最大基数的网民,我们拥有让人骄傲的四大发明,我们有有流传全世界的孙子兵法,可是在互联网时代,我们却落后了.互联网可以说是江山人才辈辈出,各领风骚三两年. 让我们来简单地回顾一下近几年的互联 ...

  8. Oracle 数据库备份还原(Expdp/impdp)记录

    最近公司将原数据库服务器切换.之前没整过这块,也是一堆的度娘.经过不停的摸索,终于成功了.现在将这份艰辛记录下来,方便自己以后查阅的同时,方便有类似需求的同学参考. 我们此次切换共分:ERP.LOS. ...

  9. dubbo学习 二 dubbo源码大致查阅

    源码的解析在官网都已经写的非常详细,可以参考:http://dubbo.io/Developer+Guide-zh.htm   服务提供者暴露一个服务的详细过程 首先ServiceConfig类拿到对 ...

  10. Springboot热部署(热部署原理)和用IDEA开发需要的配置

    热部署原理 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>s ...