半圆:

#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. 传统BP对比CNN

    传统BP vs CNN 存在2个问题 传统BP网络存在的问题: 权值太多,计算量太大 权值太多,需要大量样本进行训练 传统的BP来处理图像问题的话因为计算权值太多太大. 网络的建立要根据数据的大小来建 ...

  2. Java习题附答案

    第一章练习题(Java入门) 1.下列哪项不是JDK所包含的内容?(选一项)C 红色代表正确答案 A.Java编程语言 B.工具及工具的API C.Java EE扩展API D.Java平台虚拟机 2 ...

  3. 精选30道Java笔试题附答案分析

    精选30道Java笔试题解答 都是一些非常非常基础的题,是我最近参加各大IT公司笔试后靠记忆记下来的,经过整理献给与我一样参加各大IT校园招聘的同学们,纯考Java基础功底,老手们就不用进来了,免得笑 ...

  4. Difference between x:Reference and x:Name

    {x:Reference ...} -> returns just a reference of an object it doesn't create that "bridge&qu ...

  5. pytorch中的view

    https://ptorch.com/news/59.html view()相当于reshape(),其中参数若为-1表示当前的size根据其余size推断

  6. 响应式Web设计- 图片

    使用width属性:如果width属性设置为100%,图片会根据上下范围实现响应式的功能. <!DOCTYPE html><html><head><meta ...

  7. Java异常 Exception类及其子类

    C语言时用if...else...来控制异常,Java语言所有的异常都可以用一个类来表示,不同类型的异常对应不同的子类异常,每个异常都对应一个异常类的对象. Java异常处理通过5个关键字try.ca ...

  8. touch-action css属性 滚动和缩放手势

    CSS 属性 touch-action 用于指定某个给定的区域是否允许用户操作,以及如何响应用户操作(比如浏览器自带的划动,缩放等) 默认情况下,平移(滚动) 和 缩放手势由浏览器专门处理.该属性用于 ...

  9. 两种常见JS面向象写法

    基于构造函数 function Circle(r) { this.r = r; } Circle.PI = 3.14159; Circle.prototype.area = function() { ...

  10. Web字节码(WebAssembly) Emscripten编译器安装

    首先你需要提前安装 git python 环境并且Ctrl+R输入cmd在windows的dos界面下能够运行 第一步: 在github上downloade下来emsdk git clone http ...