话说，大家都知道如何使用CSS3画一个圆，那么有好多同学可能不知道，CSS3可以画半圆、四分之一圆以及四分之三圆。下面我们一起看一下如何实现吧！
- 技术点: CSS3圆角
border-radius
1. 基本原理
通常，我们使用border-radius设置盒子四个圆角，其实，这四个圆角各自有单独的属性，可以单独设置的。如下表所示：
|No.|属性|作用|
|:-:|
|1|border-top-left-radius|左上角|
|2|border-top-right-radius|左下角|
|3|border-bottom-left-radius|右上角|
|4|border-bottom-right-radius|右下角|
我们使用的border-radius只是一个简写。这个简写与padding margin简写一样，有四种写法。
|No.|属性|作用|
|:-:|
|1|border-radius:半径;|四个角圆弧半径|
|2|border-radius:半径1 半径2;|左上和右下圆弧半径为半径1；左下和右上圆弧半径为半径2|
|3|border-radius:半径1 半径2 半径3;|左上圆弧半径为半径1；左下和右上圆弧半径为半径2；右下圆弧半径为半径3|
|4|border-radius:半径1 半径2 半径3 半径4;|左上圆弧半径为半径1；左下圆弧半径为半径2；右下圆弧半径为半径3；右上圆弧半径为半径4|
2. 半圆
如图上，上半圆只是把一个宽高比为2:1的矩形，只设置左上与右上角的圆角，圆弧半径等于矩形高度，即可。
代码如下：
- HTML
<div class="half-circle-top"></div>
- CSS
.half-circle-top{
width:100px;
height:50px;
border-top-left-radius:50px;
border-top-right-radius:50px 50px;
background:#f00;
}
练习：如何做下半圆、左半圆与右半圆？
3. 四分之一圆
如图上，左上四分之一圆只是把一个正方形，设置左上角的圆角，圆弧半径等于变长，即可。
代码如下：
- HTML
<div class="quarter-circle-top-left"></div>
- CSS
.quarter-circle-top-left{
width:50px;
height:50px;
border-top-left-radius:50px;
background:#f00;
}
练习：如何做左下四分之一圆、右上四分之一圆与右下四分之一圆？
4. 四分之三圆
如图上，上面会做的童鞋，看到这个图形觉得很难，其实只是一个上半圆与左下四分之三圆组合而成。思考方式决定解决方式。
代码如下：
- HTML
<div class="half-circle-top"></div>
<div class="quarter-circle-bottom-left"></div>
- CSS
.half-circle-top{
width:100px;
height:50px;
border-top-left-radius:50px;
border-top-right-radius:50px 50px;
background:#f00;
}
.quarter-circle-bottom-left{
width:50px;
height:50px;
border-bottom-left-radius:50px;
background:#f00;
}
练习：如何其他三种的四分之三圆吧？提示要用到浮动的喔
其他
如图上，是否觉得这个图不可能做到呢？这里需要使用一个CSS3转换(变形)属性transform,属性值中rotateZ函数表示以垂直电脑屏幕的Z轴为轴线旋转，参数-45deg是旋转角度，正值是瞬时值，负值是逆时针；deg是角度单位。
代码如下：
- HTML
<div class="round">
<div class="half-circle-top"></div>
<div class="quarter-circle-bottom-left"></div>
</div>
- CSS
.round{
width:100px;
transform:rotateZ(-45deg);
}
.half-circle-top{
width:100px;
height:50px;
border-top-left-radius:50px;
border-top-right-radius:50px 50px;
background:#f00;
}
.quarter-circle-bottom-left{
width:50px;
height:50px;
border-bottom-left-radius:50px;
background:#f00;
}
以上，CSS3圆角的基本用法完成，其他用法敬请期待。
可参考CSS3制作各种形状图像，制作各种图形。
