在浏览器网页时，我们经常可以看到各种圆角效果。从用户体验上来说，圆角效果是比较美观大方的。在 CSS 2.1 中，为元素添加圆角效果是一件很头疼的事情，大多数情况下都是借助背景图片这种老办法来实现。
而在前端开发中，我们都是秉着 “尽量少用图片” 的原则。能用 CSS 实现的效果，就尽量不要用图片。因为每一个图片都会引发一次 HTTP 请求，加上图片体积大，会极大影响页面的加载速度。
提示: 咱们绿叶网也大量使用了 CSS 圆角效果，小伙伴们可以自行查看一下。
CSS border-radius 实现圆角
1. border-radius 属性简介
在 CSS3 中，我们可以使用 border-radius 属性为元素添加圆角效果。
语法：
border-radius: 取值;说明：
border-radius 属性取值是一个长度值，单位可以是 px、em 和百分比等。
示例 1：border-radius 基本用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 200px;
height: 150px;
border: 1px solid gray;
border-radius: 20px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>页面效果如下图所示。
分析：
border-radius: 20px; 表示设置元素 4 个角的圆角半径都是 20px。
2. border-radius 属性值的 4 种写法
border-radius 属性跟 border、padding、margin 等属性相似，其属性值也有 4 种写法。
（1）border-radius 设置 1 个值
例如，border-radius: 10px; 表示 4 个角的圆角半径都是 10px，效果如下图所示。
（2）border-radius 设置两个值
例如，border-radius: 10px 20px; 表示左上角和右下角的圆角半径是 10px，右上角和左下角的圆角半径都是 20px，效果如下图所示。
（3）border-radius 设置 3 个值
例如，border-radius: 10px 20px 30px; 表示左上角的圆角半径是 10px，左下角和右上角的圆角半径都是 20px，右下角圆角半径是 30px，效果如下图所示。
（4）border-radius 设置 4 个值
例如，border-radius: 10px 20px 30px 40px; 表示左上角、右上角、右下角和左下角的圆角半径，依次是 10px、20px、30px、40px，效果如下图所示。
提示: 上面提到的 “左上角、右上角、右下角、左下角”，大家按照顺时针方向来记忆就好了。实际上，像 border、margin、padding 等可以设置 4 个值的属性，都是按照顺时针方向来设置值。
示例 2：border-radius 设置 4 个值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 200px;
height: 100px;
border: 1px solid red;
border-radius: 10px 20px 30px 40px;
background-color: #FCE9B8;
}
</style>
</head>
<body>
<div></div>
</body>
</html>页面效果如下图所示。
分析：
小伙伴们可以自行为 border-radius 属性设置不同值，然后查看实际效果如何。
在实际开发中，border-radius 属性一般都是设置一个值，使得 4 个圆角效果都一样。4 个圆角都搞得不一样，有必要这么花哨么？当然有啊，像下面这种效果就是这么花哨。对于下图所示的效果，关键是怎么实现标签前面的圆形。
示例 3：border-radius 实现美观圆角
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 50px;
line-height: 50px;
border-radius: 80% 90% 100% 20%;
background-color: #E61588;
font-size: 30px;
text-align: center;
color: white;
}
</style>
</head>
<body>
<div>6</div>
</body>
</html>页面效果如下图所示。
CSS border-radius 实现半圆和圆
1. 半圆
对于半圆来说，它分为：上半圆、下半圆、左半圆、右半圆。我们只要学会制作某一个方向的半圆，其他方向的半圆都可以轻松实现，因为原理是一样的。
假如我们要制作上半圆，实现原理是这样的：把高度（height）设为宽度（width）的一半，并且左上角和右上角的圆角半径定义与元素的高度一致，而右下角和左下角的圆角半径定义为 0。
示例 4：border-radius 实现半圆
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 100px;
height: 50px;
border: 1px solid red;
border-radius: 50px 50px 0 0;
background-color: #FCE9B8;
}
</style>
</head>
<body>
<div></div>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，border-radius 属性值等于圆角的半径。小伙伴们结合一下圆和矩形的数学知识，稍微想一想就知道上半圆该如何实现。
此外，请大家根据上面的原理自行思考下半圆、左半圆以及右半圆是如何实现。
2. 圆
在 CSS3 中，圆的实现原理是这样的：元素的宽度和高度定义为相同值，然后 4 个角的圆角半径定义为宽度（或高度）的一半（或者 50%）。
示例 5：border-radius 实现圆
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 100px;
height: 100px;
border: 1px solid red;
border-radius: 50px; /* 或者：border-radius: 50% */
background-color: #FCE9B8;
}
</style>
</head>
<body>
<div></div>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，width 和 height 属性值相同，border-radius 属性值为 width（或 height）的一半，然后就可以实现一个圆了。
border-radius 属性很强大，可以制作出鸡蛋、心形、柠檬、叶子等各种不规则形状。比如下面的 “心形” 就可以使用 border-radius 做出来的，小伙伴们可以思考一下如何实现？
CSS border-radius 实现椭圆
在 CSS 中，我们也是使用 border-radius 属性来实现椭圆的。
语法：
border-radius: x / y;说明：
x 表示圆角的水平半径，y 表示圆角的垂直半径。从之前的学习我们知道，border-radius 属性取值可以是一个值，也可以是两个值。
当 border-radius 属性取值为一个值时，例如，border-radius: 30px; 表示圆角水平半径和垂直半径为 30px，也就是说 border-radius: 30px; 等价于 border-radius: 30px/30px，前者是后者的缩写，效果如下图所示。
当 border-radius 属性取值为两个值时，例如，“border-radius: 20px/40px;” 表示圆角的水平半径为 20px，垂直半径为 40px，效果如下图所示。
如果想要实现椭圆，原理如下：元素的宽度和高度不相等，其中 4 个角的圆角水平半径定义为宽度的一半，垂直半径定义为高度的一半。
示例 6：border-radius 实现椭圆
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 160px;
height: 100px;
border: 1px solid gray;
border-radius: 80px / 50px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>页面效果如下图所示。
分析：
用 CSS 实现椭圆在实际开发中也比较常见。此外，我们可以尝试使用 border-radius 属性来实现下面各种图形效果，以便加深理解。
提示: 只要 border-radius 的值大于等于高度的一半，矩形就会自动变成胶囊形。这是一个非常实用的技巧。
border-radius 的派生子属性
border-radius 属性可以分别为 4 个角设置相应的圆角值，这 4 个角的属性（按顺时针方向）如下表所示。
| 属性 | 说明 |
|---|---|
| border-top-right-radius | 右上角圆角 |
| border-bottom-right-radius | 右下角圆角 |
| border-bottom-left-radius | 左下角圆角 |
| border-top-left-radius | 左上角圆角 |
注意，右上角圆角应该写成 “border-top-right-radius”，如果写成 “border-right-top-radius” 则是无效的。
