转载自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. placeholder文字颜色与是否显示兼容性

    1.ie显示问题 <script type="text/javascript"> $(document).ready(function(){ var doc=docum ...

  2. Ubuntu 16.04 LTS发布

    [Ubuntu 16.04 LTS发布]Ubuntu 16.04 LTS 发布日期已正式确定为 2016 年 4 月 21 日,代号为 Xenial Xerus.Ubuntu16.04 将是非常受欢迎 ...

  3. magento模板文件结构详解

    来自: 南国佳木(茶者,南方之嘉木也.) 2015-09-01 23:14:43 模板文件主要分为xml布局文件和html文件 Layout(布局)文件夹存放的是此模板的.xml文件(也就是模版的结构 ...

  4. 【转】Apache Digest验证

    Apache默认使用basic模块验证,都是明文传输,不太安全,所以本文使用Digest来验证,以提高安全性. 1.Apache配置: A.目录权限配置 Alias /nagios "/us ...

  5. RDIFramework.NET -.NET快速信息化系统开发整合框架 【开发实例 EasyUI】之产品管理（WebForm版）

    RDIFramework.NET—.NET快速开发整合框架 [开发实例]之产品管理(WebForm版) 接上篇:RDIFramework.NET (.NET快速信息化系统开发整合框架) [开发实例]之 ...

  6. ubuntu安装mysql--PC端

    sudo apt-get update sudo apt-get install mysql-server mysql-client //密码:mmchong sudo netstat -tap|gr ...

  7. gedit 没有preference项，使preference回归，并用命令行设置行号，text wrapping等

    1.最简单的,使preference选项回来: gsettings set org.gnome.settings-daemon.plugins.xsettings overrides '@a{sv} ...

  8. cocos2dx 入门

    1.设置环境变量 JAVA_HOME=C:\Program Files\Java\jdk1.7.0_17CLASSPATH=.;%JAVA_HOME%\lib;Path增加%JAVA_HOME%\bi ...

  9. ftl 问题

    取不到后台数据,这里是因为 page 已经是关键字

  10. Testlink部署全攻略

    部署前准备: xampp,我下载的链接:https://www.apachefriends.org/download.html Testlink,下载地址:https://sourceforge.ne ...