转载自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. LeetCode Reverse String

    原题链接在这里:https://leetcode.com/problems/reverse-string/ 题目: Write a function that takes a string as in ...

  2. SpringMVC常用配置-处理程序异常以及404错误

  3. C#读取Excel表格数据到DataGridView中和导出DataGridView中的数据到Excel

    其实想在datagridview中显示excel表格中的数据跟读取数据库中的数据没什么差别,只不过是创建数据库连接的时候连接字段稍有差别. private void btnShow_Click(obj ...

  4. app慢的可能情况需要优化

    网络请求超时的机制设置,发现如果设置3S太短,导致有一些服务不能成功请求到数据,每次都报超时.问题解决 1. 调大超时时间 2. 优化查询mysql http://blog.chinaunix.net ...

  5. oracle归档模式和非归档模式的切换

    Oracle从未归档日志改成归档日志: SQL> shutdown immediate; 数据库已经关闭. 已经卸载数据库. Oracle 例程已经关闭. SQL> startup mou ...

  6. Linux 安装记录

    ######ubuntu-16.04.1-desktop-amd64 ||| Unity desktop Environment, NOT !!! ######deepin-15.3-amd64.is ...

  7. Java Timer定时器时，每次重复执行了两次任务的解决方案

    web.xml监听配置 com.numenzq.mc.service.impl.TimerListener TimerListener类 public class TimerListener impl ...

  8. 前端js面试中的常见的算法问题

    虽说我们很多时候前端很少有机会接触到算法.大多都交互性的操作,然而从各大公司面试来看,算法依旧是考察的一方面.实际上学习数据结构与算法对于工程师去理解和分析问题都是有帮助的.如果将来当我们面对较为复杂 ...

  9. 。。。欢乐捕鱼App WeX5 连接打包代理服务失败，请检查代理服务地址是否正确。。。

    今天学习了WeX5,第一次使用,使用它打包一个Web App 欢乐捕鱼的时候,在最终打包生成Native App的时候突然报错了,说:"连接打包代理服务失败,请检查代理服务地址是否正确&qu ...

  10. Java被忽略的基本知识（三）

    35.e.printStackTrace();输出异常信息,也可以使用System.out.println(e); 36.范围小的异常,要放在范围大的异常前面. 37.断言:判断某个结果的正确性,正确 ...