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. 剑指offer-第六章面试中的各项能力(圆圈中剩下的最后数字)

    import java.util.ArrayList; import java.util.Iterator; import java.util.LinkedList; import java.util ...

  2. 不得不注意tornado多进程部署的副作用

    tornado多进程启动时,采用的是fork的方式. 一个现有进程可以调用fork函数创建一个新进程.由fork创建的新进程被称为子进程(child process).fork函数被调用一次但返回两次 ...

  3. as3 htmlText 的bug

    as的文本框  会把连续的英文当作一个单词处理 如果是在已有内容的行后 超过宽度就会换行 左边的用了英文冒号直接被当成完整的单词右边的被当成了 jj5jk : mmmmmmmmmm 三个单词

  4. 一个工程实例来学习 Makefile

    March 3, 2015 8:19 PM Makefile 文件的编写 学习前的准备 需要准备的工程目录结构如下: . ├── add │   ├── add_float.c │   ├── add ...

  5. textView 添加超链接(两种实现方式)

    在textView添加超链接,有两种方式,第一种通过HTML格式化你的网址,一种是设置autolink,让系统自动识别超链接,下面为大家介绍下这两种方法的实现 在textView添加超链接,有两种方式 ...

  6. ssh面试题2

    1. BeanFactory的作用是什么? [中] BeanFactory是配置.创建.管理bean的容器,有时候也称为bean上下文.Bean与bean的依赖关系,也是由BeanFactory负责维 ...

  7. 文件操作之增删改查3---文件的修改,f.replace(),在linux里的一些应用sed,with语句方法来打开一个或多个文件避免忘记关闭,python一行写的太长,怎么编写多行的规范

    f.replace()with open("xxx","r",encoding="utf-8") as f: 想修改文件中间的数据,有两个办 ...

  8. Invalid byte tag in constant pool: 19

    环境: windows 2008 server R2   ; tomcat 8.5.3 ;   jdk-1.8.0_91 故障截图: 报的就是 Invalid byte tag in constant ...

  9. 本人编写的一份前端vue面试题

    说明,此题目本人自出,做过本人所在公司的前端面试题,在此共享给大家 1. 如何在vue组件中实现v-model的功能?(只需给出关键代码) 2. 简述你知道的生命周期函数和执行时机 3. 谈谈你对计算 ...

  10. transfrom-runtime文档

    transfrom-runtime文档 babel只会默认对句法进行转换,而那些方法,api不会转换,要转就要使用polyfill和transform,这里介绍transform,关于polyfill ...