转载自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. 接入WebSocket记录

    为什么用 WebSocket 因为APP里面有个聊天功能,需要服务器主动推数据到APP.HTTP 通信方式只能由客户端主动拉取,服务器不能主动推给客户端,如果有实时的消息,要立刻通知客户端就麻烦了,要 ...

  2. AFNETWorking 不支持中文URL请求

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #000000; min-height: 16.0px } p.p ...

  3. Leetcode: Sequence Reconstruction

    Check whether the original sequence org can be uniquely reconstructed from the sequences in seqs. Th ...

  4. Linux Crontab 安装使用详细说明

    crontab命 令常见于Unix和Linux的操作系统之中,用于设置周期性被执行的指令.该命令从标准输入设备读取指令,并将其存放于“crontab”文件中,以供 之后读取和执行.通常,crontab ...

  5. linux下安装软件出现问题怎么办

    是apt-get -f install=apt-get install -f ,是修复依赖关系(depends)的命令,就是假如你的系统上有某个package不满足依赖条件,这个命令就会自动修复,安装 ...

  6. 多线程迭代之——LINQ to TaskQuery

    平时经常会迭代集合,如果数据多的话会很耗时. 例子: , , }; list.ForEach(a => DoSomething(a)); void DoSomething(int a) { // ...

  7. 为什么C#中要设计IntPtr?

    示例代码: IntPtr vertex = someObj.Get().Lock(0, someObj.Get().GetSizeInBytes(), HardwareBuffer.LOCKOPTIO ...

  8. 轻松三步教你配置Oracle—windows环境

    最近笔者在学习Oracle的时候,虽然度过了大家所说的安装难题,但是又遇到了一系列的问题,经过多方求教才知道原来是自己仅仅是安装了Oracle,却没有在环境变量中进行相应的配置.笔者也像大家遇到问题时 ...

  9. 不可错过的炒鸡棒的js迷你库

    小而美被实践是最好用的,这里收藏了一些很好用的js库,他们都功能单一且非常小. COOKIE.JS  https://github.com/js-coder/cookie.js 如果你操作过cooki ...

  10. HTML、JavaScript之单双引号转义

    一.HTML : 双引号:" 单引号:&apos; 二.JavaScript: 双引号:\" 单引号:\'