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. hibernate的list和iterate的区别

    一.先介绍一下java中的缓存系统JCS(java cache system)  1.JCS(Java Caching System)是一个对象Cache,它可以把Java对象缓存起来,提高那些访问频 ...

  2. SOA的挑战:实体集合【转】

    SOA的挑战:实体集合 发布日期 : 2005-11-06 |  更新日期 : 2005-11-06 Ramkumar Kothandaraman 微软公司 适用于: Microsoft® Visua ...

  3. 简述负载均衡和 CDN 技术

    曾经见到知乎上有人问“为什么像facebook这类的网站需要上千个工程师维护?”,下面的回答多种多样,但总结起来就是:一个高性能的web系统需要从无数个角度去考虑他,大到服务器的布局,小到软件中某个文 ...

  4. Eclipse自动生成 get/set

    步骤一:在声明的数据域中按Ctrl+1: 步骤二:点击最后一个选项Create getter and setter,在弹出的对话框中点击确定: 在介绍另外一个方法: 步骤一:声明完类的数据域之后,输入 ...

  5. 第14篇 PSR-3规范(日志)

    1. Specification 1.1 Basics The LoggerInterface exposes eight methods to write logs to the eight RFC ...

  6. Amoeba mysql读写分离搭建及介绍

    Amoeba mysql读写分离搭建及介绍 推荐: http://blog.chinaunix.net/uid-20639775-id-154600.html

  7. 微信小程序之页面跳转

    方式一: <navigator class="menu_block" url="/pages/address/address"> <text ...

  8. 引用WebService出现错误

    在引用WebService作为服务引用的时候,由于VS生成时生成了两个入口点,导致出现 引发的异常:“System.Windows.Markup.XamlParseException”(位于 Pres ...

  9. whoosh----索引|搜索文本类库

    先了解基本概念和步骤: Quick Start Whoosh是一个索引文本和搜索文本的类库,他可以为你提供搜索文本的服务,比如如果你在创建一个博客的软件,你可以用whoosh为它添加添加一个搜索功能以 ...

  10. Flask之数据库操作

    4.2 数据库基本操作 在Flask-SQLAlchemy中,插入.修改.删除操作,均由数据库会话管理.会话用db.session表示.在准备把数据写入数据库前,要先将数据添加到会话中然后调用comm ...