css3 画半圆和1/4圆

半圆:
#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圆的更多相关文章
- css3画半圆的两种方法
<html lang="en"> <head> <meta charset="UTF-8"> <meta name=& ...
- css3画半圆 , 加上一点动画
border-radius制作半圆与制作圆形的方法是一样的,只是元素的宽度与圆角方位要配合一致,不同的宽度和高度比例,以及圆角方位,可以制作上半圆.下半圆.左半圆和右半圆效果.例如: .semicir ...
- css3画半圆
border-radius制作半圆与制作圆形的方法是一样的,只是元素的宽度与圆角方位要配合一致,不同的宽度和高度比例,以及圆角方位,可以制作上半圆.下半圆.左半圆和右半圆效果.例如:.semicirc ...
- 使用CSS3画出一个叮当猫
刚学习了这个案例,然后觉得比较好玩,就练习了一下.然后发现其实也不难,如果你经常使用PS或者Flash的话,应该就会知道画个叮当猫是很容易的事,至少我是这么觉得.但是,用CSS3画出来确实是第一次接触 ...
- 如何使用CSS3画出一个叮当猫
刚学习了这个案例,然后觉得比较好玩,就练习了一下.然后发现其实也不难,如果你经常使用PS或者Flash的话,应该就会知道画个叮当猫是很容易 的事,至少我是这么觉得.但是,用CSS3画出来确实是第一次接 ...
- css3画三角形的原理
以前用过css3画过下拉菜单里文字后面的“下拉三角符号”,类似于下面这张图片文字后面三角符号的效果 下面是一个很简单的向上的三角形代码 #triangle-up { width: 0; height: ...
- 纯CSS3画出小黄人并实现动画效果
前言 前两天我刚发布了一篇CSS3实现小黄人动画的博客,但是实现的CSS3动画是基于我在站酷网找到的一张小黄人的jpg格式图片,并自己用PS抠出需要实现动画的部分,最后才完成的动画效果.但是,其实我的 ...
- 如何用CSS3画出一个立体魔方?
前言 最近在写<动画点点系列>文章,上一期分享了< 手把手教你如何绘制一辆会跑车 >,本期给大家带来是结合CSS3画出来的一个立体3d魔方,结合了js让你随心所欲想怎么转,就怎 ...
- 使用gimp画线、矩形、圆等
使用gimp画线.矩形.圆等 https://blog.csdn.net/tody_guo/article/details/7628508 2012年06月03日 19:08:47 Tody Guo ...
随机推荐
- 设置与使用SQL Server的字符集(Collation,即排序规则)
目录 目录 正确认识SQL Server的字符集 选择合适的SQL Server字符集 错误使用SQL Server的字符集 参考资料 正确认识SQL Server的字符集 SQL Server作为一 ...
- shell脚本,逻辑结构题练习。
awk '/5/{a=1}!a' file2结果:1234解释:第一行 /5/不匹配跳过{a=1},继续!a,此时a没有值属于假取反为真,故输出第一行 第二行 /5/不匹配跳过{a=1},继续!a,此 ...
- 简单css动画 fadeIn fadeOut flash
考虑兼容性采用 -webkit- -o- -mos- -ms- @keyframes fadeIn{ 0%{ opacity: 0; display: block; } 100%{ opacity: ...
- 【计算机网络】Session机制
1. Http请求中Session机制 先简单说一下HTTP请求中的Session机制:Session数据保存在服务器端,SessionID保存在客户端的Cookies中(关闭浏览器时过期).当客户端 ...
- grub加密。
一.介绍 安全无小事 linux系统的安全分为很多方面,什么端口啊,什么网络啊,听着都特么烦,今天谈谈最简单明显的密码安全. 二.单用户模式 单用户模式个人觉得相当有用,可以用来修复系统,修改密码… ...
- webpack-dev-server proxy代理
一个最简单的代理例子:index.html中有如下代码 fetch('/api/pub/article/list?pageSize=2').then((data)=>{ return data. ...
- PAT Basic 1038
1038 统计同成绩学生 本题要求读入N名学生的成绩,将获得某一给定分数的学生人数输出. 输入格式: 输入在第1行给出不超过10^5^的正整数N,即学生总人数.随后1行给出N名学生的百分制整数成绩,中 ...
- vue 判断属性是否为object
//递归对象 var recursiveObject = Vue.extend({ name: 'recursive-object', template:[ '<ul>', '<li ...
- 如何用Jquery做图片展示效果
一. 前言 到底用JQuery做出怎样的展示效果? 让我们先来看一下!网页加载时,如图所示: 二.本人思路 这个效果初学者看起来好像有点复杂,其实不太难,关键是理清思路,从后端的数据库中找出我们要展示 ...
- CF Educational Codeforces Round 21
A. Lucky Year time limit per test 1 second memory limit per test 256 megabytes input standard input ...