半圆:

#circle1 {
width: 100px;
height: 200px;
background-color: #a72525;
-webkit-border-radius: 100px 0px 0px 100px;
}

宽度为高度的一半,相应的圆角值,right 和top或bottom 值为0。

#circle2 {
width: 200px;
height: 200px;
background-color: #a72525;
-webkit-border-radius: 200px 0 0 0;
}

宽高相同,圆角值和宽高相同,其他为0。

css3 画半圆和1/4圆的更多相关文章

  1. css3画半圆的两种方法

    <html lang="en"> <head> <meta charset="UTF-8"> <meta name=& ...

  2. css3画半圆 , 加上一点动画

    border-radius制作半圆与制作圆形的方法是一样的,只是元素的宽度与圆角方位要配合一致,不同的宽度和高度比例,以及圆角方位,可以制作上半圆.下半圆.左半圆和右半圆效果.例如: .semicir ...

  3. css3画半圆

    border-radius制作半圆与制作圆形的方法是一样的,只是元素的宽度与圆角方位要配合一致,不同的宽度和高度比例,以及圆角方位,可以制作上半圆.下半圆.左半圆和右半圆效果.例如:.semicirc ...

  4. 使用CSS3画出一个叮当猫

    刚学习了这个案例,然后觉得比较好玩,就练习了一下.然后发现其实也不难,如果你经常使用PS或者Flash的话,应该就会知道画个叮当猫是很容易的事,至少我是这么觉得.但是,用CSS3画出来确实是第一次接触 ...

  5. 如何使用CSS3画出一个叮当猫

    刚学习了这个案例,然后觉得比较好玩,就练习了一下.然后发现其实也不难,如果你经常使用PS或者Flash的话,应该就会知道画个叮当猫是很容易 的事,至少我是这么觉得.但是,用CSS3画出来确实是第一次接 ...

  6. css3画三角形的原理

    以前用过css3画过下拉菜单里文字后面的“下拉三角符号”,类似于下面这张图片文字后面三角符号的效果 下面是一个很简单的向上的三角形代码 #triangle-up { width: 0; height: ...

  7. 纯CSS3画出小黄人并实现动画效果

    前言 前两天我刚发布了一篇CSS3实现小黄人动画的博客,但是实现的CSS3动画是基于我在站酷网找到的一张小黄人的jpg格式图片,并自己用PS抠出需要实现动画的部分,最后才完成的动画效果.但是,其实我的 ...

  8. 如何用CSS3画出一个立体魔方?

    前言 最近在写<动画点点系列>文章,上一期分享了< 手把手教你如何绘制一辆会跑车 >,本期给大家带来是结合CSS3画出来的一个立体3d魔方,结合了js让你随心所欲想怎么转,就怎 ...

  9. 使用gimp画线、矩形、圆等

    使用gimp画线.矩形.圆等 https://blog.csdn.net/tody_guo/article/details/7628508 2012年06月03日 19:08:47 Tody Guo  ...

随机推荐

  1. 剑指offer42 左旋转字符串

    自己想的一个新的写法,如果不排除length=0的情况,下面那个while是死循环 class Solution { public: string LeftRotateString(string st ...

  2. 快学UIautomator之uiautomatorhelp使用

    1.先下载uiautomatorhelp插件 2.把uiautomatorhelp.java包放到自己的项目中 3.项目中引入uiautomatorhelp插件 4.在项目中设置一个main方法,引入 ...

  3. 相机 感光度iso,焦距,光圈,ccd 和 噪点, 景深关系表格

    表格 矩阵 感官度iso: 越低曝光速度越慢,所谓慢工出细活,成像质量会好,如果形成的话. 但是因为慢,所以要更多的光量,才能画完. 就需要更慢的快门 (但是太慢手抖的话就糊掉,或者动的物体形成轨迹. ...

  4. [POJ] 3362 Telephone Lines

    Telephone Lines Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 7978 Accepted: 2885 Descr ...

  5. 三段式fsm

    1.状态转移的always中CS,同步ouput的always中NS. 2.3段fsm vs 2段fsm:output逻辑是组合逻辑和同步时序逻辑(消除里不稳的和毛刺). 3.3段fsm vs 1段f ...

  6. windows下升级pip失败,重新安装pip最新版本

    环境: python3.6.5 32bit,后改为python3.4.3 32bit pycharm2018旗舰版 问题: pycharm里的pip一直无法升级到10.0.1版本,在cmd中使用升级命 ...

  7. progit 学习笔记-- 1 第一章 第二章

    * 1 起步**  关于版本控制*** 什么是版本控制?记录文件变化,查阅特定版本,回溯到之前的状态.任何类型的文件进行版本控制.复制整个目录 加上备份时间 简单 混淆 无法恢复本地版本控制 数据库记 ...

  8. 【29】html5新标签有哪些?

    [29]html5新标签有哪些? canvas svg video audio [01]article(IE8不支持) [01]details [02]aside(IE8不支持) [03]header ...

  9. loj2253 「SNOI2017」礼物

    对于一个在位置 \(i\) 的数,他等于 \(i^k+sum_{1,k-1}\). 二项式定理推 \(i^k\),矩阵快速幂即可. #include <iostream> #include ...

  10. struts2知识系统整理

    1.MVC 和 JSP Model 2 **   a.:M-Model 模型 包含两部分:业务数据和业务处理逻辑  b.V-View 视图:视图(View)的职责是负责显示界面和用户交互(收集用户信息 ...