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 ...
随机推荐
- css--背景和列表
背景 背景样式: background-color 设置元素的背景颜色 background-image 把图像设置为背景 background-repeat 设置背景图像是否重复及如 ...
- 业务系统中最核心的状态设计,异常 case. (系统设计)
系统设计几方面 1. 具象: 几个角色 -- 用例 2. 具象: 边界模块 3. 具象: 实体模块 4. 抽象: 详细设计后,抽出公用的部分. 5. Status状态字段的设置和更改 系统设计中最核心 ...
- css去除链接 input 虚框
/* css去掉虚框 */ :focus{-webkit-outline-style:none;-moz-outline-style:none;-ms-outline-style:none;-o-ou ...
- ZJOI2018游记Round1
广告 ZJOI2018Round2游记 All Falls Down 非常感谢学弟学妹们捧场游记虽然这是一篇假游记 ZJOI Round1今天正式落下帷幕.在这过去的三天里遇到了很多朋友,见识了很多有 ...
- [LUOGU] P1551 亲戚
题目背景 若某个家族人员过于庞大,要判断两个是否是亲戚,确实还很不容易,现在给出某个亲戚关系图,求任意给出的两个人是否具有亲戚关系. 题目描述 规定:x和y是亲戚,y和z是亲戚,那么x和z也是亲戚.如 ...
- PHP+Mysql实现分页
我们在项目开发的过程中避免不了使用分页功能,拿php来说,现在市面上有很多大大小小的php框架,当然了分页这种小功能这些框架中都是拿来直接可以用的. 这些框架的分页功能使用都很方便,配置一下分页所需参 ...
- leetcode-1-basic
leetcode-algorithm 1. Two Sum 解法:循环,试呗..简单粗暴.. class Solution { public: vector<int> twoSum(vec ...
- google F12
谷歌浏览器(Google Chrome)开发调试详细介绍 博客分类: 前端 浏览器chromegoogle调试开发 很多Web前台开发者都喜欢这种浏览器自带的开发者工具,这对前台设计.代码调试很大帮 ...
- Thymeleaf模板引擎+Spring整合使用方式的介绍
尊重原创,原文地址为:https://www.cnblogs.com/jiangchao226/p/5937458.html 前言 这个教程介绍了Thymeleaf与Spring框架的集成,特别是Sp ...
- 四、harbor实践之初识harbor
1 什么是Harbor harbor是VMware公司开源的企业级Registry项目,其的目标是帮助用户迅速搭建一个企业级的Docker registry 服务. 2 什么是Registry Reg ...