00015.jpg

圆角

在CSS中，添加圆角需要用到border-radius属性。

image.png

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;

如下图所示。

image.png

指定的四个值从盒子的左上角开始，顺时针旋转。
也就是说（以上图为例），第一个值（20px）应用于左上角，第二个值（30px）应用于右上角，第三个值（80px）应用于右下角，第四个值（10px）应用于左下角。

除此之外，也可以只提供两个值。此时，第一个值应用于左上角和右下角，第二个值应用于右上角和左下角。

最后，也可以提供三个值，此时，第一个值应用于左上角，第二个值应用于右上角和左下角，第三个值应用于右下角。

下图可以看出对应关系。

image.png

如果不嫌麻烦，还可以使用不同的属性分别定义各个角的外观：

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;

image.png

很明显，设置了两个值之后，就不是一开始那种规规矩矩的圆角了。
以上面的代码为例，其中，40px是横向半径，20px是纵向半径。这两个值之间的斜线是告诉浏览器，我们想创建椭圆轨迹。

图解：

image.png
image.png

除此之外，我们还可以提供4个值，在四个角绘制不同的椭圆角。

语法：先提供四个横向半径的值（从左上角开始），写斜线（/），然后再提供四个纵向半径。
如：

CSS代码：

border-radius: 40px 10px 20px 90px / 20px 30px 80px 10px;

image.png

意思就是为4个角提供完全不同的水平和垂直的半径。

最后，需要注意的是：
画椭圆角时，如果需要指定其中一个角（比如border-top-left-radius、border-top-right-radius、border-bottom-right-radius和border-bottom-left-radius），设置横向值和纵向值之间，不需要斜线（/），直接用空格隔开就行。

如：

CSS代码：

border-top-right-radius: 80px 20px;

image.png

这里我指定了右上角。

切记这点注意事项！

IE8 及之前的版本都不支持border-radius属性。
不支持该属性的旧浏览器将盒子显示为直角。

HTML与CSS 目录：HTML与CSS

上一篇：【CSS】渐变背景（background-image）

下一篇：【CSS】省略号