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. ansible playbook 使用

    ansible playbook 格式是json  yaml   1. 执行方法 ansible-playbook deply.yml 2. playbook 格式 关键字 hosts 主机ip 主机 ...

  2. 自定义标签2.x

    2.x只需要继承SimpleTagSupport 1.x 输出流  JspWriter out = pageContext.getOut(); 2.x 输出流  JspWriter out = get ...

  3. bzoj 3998 [TJOI2015]弦论——后缀自动机

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=3998 相同子串算多个的话,先求好 right ,然后求一个 sm 表示走到这个点之后有几种走 ...

  4. bzoj 3566 [SHOI2014]概率充电器——树型

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=3566 一眼看上去高斯消元.n^3不行. 竟然直接去看了TJ.发现树型dp.一下想到了自己还没 ...

  5. 【Python学习笔记】macosx 10.11 python pip install 出现错误OSError: [Errno 1] Operation not permitted:

    http://www.cnblogs.com/xiongqiangcs/p/4914049.html pip install --upgrade pip sudo pip install numpy ...

  6. Php header()函数及其常见使用

    语法: Void header(string $string[,bool $replace=true [, int $http_response_code) 向客户端发送原始的HTTP报头 需注意: ...

  7. 分布式缓存系统 Memcached 状态机之socket连接与派发

    上节已经分析到了主线程中监听socket注册事件和工作线程中连接socket注册事件的回调函数都是event_handler,且event_handler的核心部分都是一个有限状态机:drive_ma ...

  8. chrome浏览器手动添加印象笔记剪藏插件

    标签(空格分隔): chrome浏览器,日常办公 一直为每次从网页上复制内容之后,还需要再去复制对应的网址,倍感麻烦.之前偶尔这样操作还可以,最近在学习新东西,要保留下来的网页实在太多,而且不利于分类 ...

  9. angular 本地存储

    localStorage四种方法: localStorage.getItem(key):获取指定key本地存储的值localStorage.setItem(key,value):将value存储到ke ...

  10. elasticsearch5.6.8中文分词器

    安装分词器,务必确保版本一致! 下载地址:https://github.com/medcl/elasticsearch-analysis-ik 为了保证一致,我特地将elasticsearch进行降级 ...