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. Laravel 5使用Laravel Excel实现Excel/CSV文件导入导出的功能详解

    1.简介 本文主要给大家介绍了关于Laravel 5用Laravel Excel实现Excel/CSV文件导入导出的相关内容,下面话不多说了,来一起看看详细的介绍吧. Laravel Excel 在 ...

  2. fn project AWS Lambda 格式 functions

      Creating Lambda Functions Creating Lambda functions is not much different than using regular funct ...

  3. Linux 自定义总线类型

    #include <linux/module.h> #include <linux/init.h> #include <linux/device.h> // 按照 ...

  4. mybatis返回Date类型数据 格式化

    @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss",timezone = "GMT+8") public Date getC ...

  5. grep 命令使用指南

    grep 命令 grep参数: -E:等同于egrep -o:只匹配你想要的内容,下面是示例: [root@localhost ~]# cat /data/game/config/server_con ...

  6. java中绘制长方形,椭圆形,圆形的方法

    总结:方法,main函数的作用你还没搞清楚 //画一个矩形 import java.awt.*; import javax.swing.*; public class Test2 extends JF ...

  7. 方格取数(dp)

    方格取数 时间限制: 1 Sec  内存限制: 128 MB提交: 9  解决: 4[提交][状态][讨论版][命题人:quanxing] 题目描述 设有N×N的方格图,我们在其中的某些方格中填入正整 ...

  8. DB2的安装

    jiangxin@db01:~$ su – root #切换到root用户 密码: root@db01:~# uname -a #查看内核和操作系统信息 Linux db01 4.4.0-66-gen ...

  9. unicode gbk 转换函数

    typedef unsigned short WCHAR; //字库信息结构体定义 //用来保存字库基本信息,地址,大小等 __packed typedef struct { u8 fontok; / ...

  10. 完全卸载oracle11g步骤:

    完全卸载oracle11g步骤:1. 开始->设置->控制面板->管理工具->服务 停止所有Oracle服务.2. 开始->程序->Oracle - OraHome ...