转载自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. 关于iOS和android自定义包的名字

    自定义包名的使用,android的包名和ios的包名都是你的自定义包名!如下以新浪微博SDK自定义包名示例:(官方没的,自己踩过坑,方便后来人吧) 相关技术文档:http://www.apicloud ...

  2. java 读写文件

    1. 读文件 import java.io.*; import java.util.*; public class test { public void test_readfile(String fi ...

  3. spring session 和 spring security整合

    背景: 我要做的系统前面放置zuul. 使用自己公司提供的单点登录服务.后面的业务应用也是spring boot支撑的rest服务. 目标: 使用spring security管理权限包括权限.用户请 ...

  4. Prototype based langue LUA

    Prototype-based programming https://en.wikipedia.org/wiki/Prototype-based_programming Prototype-base ...

  5. GPS部标平台的架构设计(五)-地图服务算法库

    GPS平台,需要和各种地图打交道,需要解决以下的问题: 1.坐标偏移,这个不用多说,需要将原始坐标加偏,然后在百度地图或谷歌上显示出来,需要注意的是百度地图的加偏是偏上再偏,谷歌.高德地图等是火星坐标 ...

  6. Java:批量插入、修改数据到数据库中的用法

    在java中使用JDBC实现批处理的对象一般是使用PrepareStatement对象. 如何使用: Class.forName("Oracle.jdbc.driver.OracleDriv ...

  7. leetcode pow(x,n)实现

    题目描述: 自己实现pow(double x, int n)方法 实现思路: 考虑位运算.考虑n的二进制表示形式,以n=51(110011)为例,x^51 = x^1*x^2*x^16*x^32,因此 ...

  8. DataRow映射实体

    public static T ConvertToModel<T>(DataRow dr) where T : new() { T t = new T(); Type modelType ...

  9. getPhysicalNumberOfCells 与 getLastCellNum的区别

    用org.apache.poi的包做excel导入,无意间发明若是excel文件中有空列,空列后面的数据全部读不到. 查来查去本来是HSSFRow供给两个办法:getPhysicalNumberOfC ...

  10. Cef 架构

    cef支持各种语言和多种操作系统.在设计的时候充分考虑了性能和易用性.cef核心功能提供了c和c++的接口.cef提供了和主程序之间的通信能力(利用 custom plugins, protocols ...