CSS3圆角效果：从圆出发

话说，大家都知道如何使用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>

.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>

.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>

.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>

.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制作各种形状图像，制作各种图形。

CSS3圆角效果：从圆出发