圆角
在CSS中，添加圆角需要用到border-radius属性。
HTML代码：
<div class="speciaBox"></div>
CSS代码：
.speciaBox {
width: 300px;
height: 200px;
background: teal;
border-radius: 20px;
}
浏览器会以指定的值为半径，在元素的各个角上绘制圆角。设定的值是圆心到圆周的距离，即半径。
半径最常用的单位是px和em，不过也可以使用百分比（百分比相对来说比较不好控制，接下来会讲到）。
如果只指定一个值，浏览器会使用相同的半径绘制元素的四个角。如上面的例子（border-radius: 20px;）。
如果不是四个角都得使用相同的值，我们可以提供四个值，分别设定四个角。
如：
CSS代码
border-radius: 20px 30px 80px 10px;
如下图所示。
指定的四个值从盒子的左上角开始，顺时针旋转。
也就是说（以上图为例），第一个值（20px）应用于左上角，第二个值（30px）应用于右上角，第三个值（80px）应用于右下角，第四个值（10px）应用于左下角。
除此之外，也可以只提供两个值。此时，第一个值应用于左上角和右下角，第二个值应用于右上角和左下角。
最后，也可以提供三个值，此时，第一个值应用于左上角，第二个值应用于右上角和左下角，第三个值应用于右下角。
下图可以看出对应关系。
如果不嫌麻烦，还可以使用不同的属性分别定义各个角的外观：
CSS代码：
border-top-left-radius: 20px;
border-top-right-radius: 30px;
border-bottom-right-radius: 80px;
border-bottom-left-radius: 10px;
小学英语就能看懂上面代码~
以上代码等同于
border-radius: 20px 30px 80px 10px;
椭圆角
椭圆角其实也属于圆角的一种，椭圆角的轨迹由2个半径值确定：
第一个是中心点到左顶点或右顶点的距离；
第二个是中心点到上顶点或下顶点的距离。
例如：
CSS代码：
border-radius: 40px / 20px;
很明显，设置了两个值之后，就不是一开始那种规规矩矩的圆角了。
以上面的代码为例，其中，40px是横向半径，20px是纵向半径。这两个值之间的斜线是告诉浏览器，我们想创建椭圆轨迹。
图解：
除此之外，我们还可以提供4个值，在四个角绘制不同的椭圆角。
语法：先提供四个横向半径的值（从左上角开始），写斜线（/），然后再提供四个纵向半径。
如：
CSS代码：
border-radius: 40px 10px 20px 90px / 20px 30px 80px 10px;
意思就是为4个角提供完全不同的水平和垂直的半径。
最后，需要注意的是：
画椭圆角时，如果需要指定其中一个角（比如border-top-left-radius、border-top-right-radius、border-bottom-right-radius和border-bottom-left-radius），设置横向值和纵向值之间，不需要斜线（/），直接用空格隔开就行。
如：
CSS代码：
border-top-right-radius: 80px 20px;
这里我指定了右上角。
切记这点注意事项！
IE8 及之前的版本都不支持border-radius属性。
不支持该属性的旧浏览器将盒子显示为直角。
HTML与CSS 目录：HTML与CSS
上一篇：【CSS】渐变背景（background-image）
下一篇：【CSS】省略号
