转载自http://blog.csdn.net/gongstrong123/article/details/50888758

绘制圆形，环形，椭圆

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
//圆形

        .circle1{
            width: 200px;
            height: 200px;
            background-color: blue;
            border-radius: 50%;
        }
//环形

        .circle2{
            width: 200px;
            height: 200px;
            background-color: blue;
            border-radius: 50%;
            border: 50px solid red;
        }
//椭圆

        .circle3{
            width: 200px;
            height: 300px;
            background-color: red;
            border-radius: 50%;
        }

    </style>
</head>
<body>

<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>

</body>
</html>

还有长方形等各种其他形状

http://www.cnblogs.com/top5/archive/2012/02/14/2351959.html

Css绘制圆形，环形，椭圆等图形的更多相关文章

  1. Android自定义ImageView实现图片圆形 ，椭圆和矩形圆角显示

    Android中的ImageView只能显示矩形的图片,为了用户体验更多,Android实现圆角矩形,圆形或者椭圆等图形,一般通过自定义ImageView来实现,首先获取到图片的Bitmap,然后通过 ...

  2. CSS 魔法系列：纯 CSS 绘制基本图形（圆、椭圆等）

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

  3. 摘记 史上最强大的40多个纯CSS绘制的图形（一）

    今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形.圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和网站小图标,真的非常强大,分享给大家. Square(正方 ...

  4. 史上最强大的40多个纯CSS绘制的图形

    Square(正方形) #square { width: 100px; height: 100px; background: red; } Rectangle(矩形) #rectangle { wid ...

  5. 40多个纯CSS绘制的图形

    本文由码农网 – 陈少华原创,转载请看清文末的转载要求. 今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形.圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和 ...

  6. CSS绘制简单图形

    究竟该用字体图标.图片图标.还是CSS画一个图标?我也不知道.各有千秋吧.本文将介绍如何用css绘制简单的图形,所有测试在chrome58.0完成,如果你不能得到正确结果请到caniuse查一查看看是 ...

  7. 史上最强大的40多个纯CSS绘制的图形[转]

    今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形.圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和网站小图标,真的非常强大,分享给大家. Square(正方 ...

  8. 用CSS绘制最常见的40种形状和图形

    今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形.圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和网站小图标,真的非常强大,分享给大家. Square(正方 ...

  9. 纯CSS绘制的图形一览

    整理网上一些使用纯CSS绘制的图形示例~~纯属抄袭,哈哈...仅仅是为了自己以后查看! Square(正方形) #square { width: 100px; height: 100px; backg ...

随机推荐

  1. div垂直居中

    width:265px; height:130px; display:table-cell; vertical-align:middle; text-align:center;

  2. ubuntu server 12.04U盘安装，提示无法挂载安装光盘或光盘读取数据出错

    今天用Ultraiso将Ubuntu server 12.04 刻入U盘中安装系统,中间提示错误:1.检测不到cdrom(即U盘没有挂载上):2.从光盘中读取数据出错.问题如下图所示: 上网搜了下解决 ...

  3. sprint 3 总结

    1.要求: 演示可参考毕业设计答辩,包含两部分内容: 项目陈述,可综述项目.团队.开发过程等. 运行演示,实现的功能.业务.用户反馈等. 希望各组认真准备,拿出最好的阵容最好的状态,展示一学期的学习与 ...

  4. 屌丝程序员的梦想 (六) 我也写个开源CMS

    离开上家公司之后,我没急着找下家公司,一直以来都是为公司做各个细小的功能却没有属于自己的完整的项目 思来想去,我准备用自己熟悉的thinkphp 和 extjs写一个开源的cms,从用户系统,文章系统 ...

  5. Docker的容器创建以及基本命令

    1. 使用docker run创建docker容器,(docker命令都是以docker开头的)安装完docker后,大多数情况下,本机上面一般没有docker镜像的,执行docker run的时候一 ...

  6. 常用git命令总结

    这些命令是最常用的,一般的提交代码.拉取代码.合并代码.分支切换等等操作用这些命令就足够了.    1.git init 把一个目录初始化成git仓库    2.git add test.txt 把文 ...

  7. php开发客服系统(持久连接+轮询+反向ajax 转载 http://www.tuicool.com/articles/2mU7v2R)

    php开发客服系统( 下载源码 ) 用户端(可直接给客户发送消息) 客服端(点击用户名.即可给该用户回复消息) 讲两种实现方式: 一:iframe + 服务器推技术comet(反向ajax,即服务器向 ...

  8. 推荐！手把手教你使用Git

    推荐!手把手教你使用Git 原文出处: 涂根华的博客   http://blog.jobbole.com/78960/ 一:Git是什么? Git是目前世界上最先进的分布式版本控制系统. 二:SVN与 ...

  9. vue.js 渲染完成回调

    vue.js渲染完成后,想触发一些事情,写在哪里呢? 答案是mounted 例子: new Vue({ el:'#demo', data:{ text:'Hello' }, mounted:funct ...

  10. 自定义指令-directive (转)

    1.指令作用域中的@ 作用是把当前属性作为字符串传递. 前台代码: <div ng-controller="MyCtrl">       <drink water ...