border-radius语法
border-radius: 1-4 length|% / 1-4 length|%;
也可以分开写，比如：
border-top-left-radius:10px;
border-top-right-radius:2em;
border-bottom-right-radius:10%;
border-bottom-left-radius:9999px 10%;
支持相对单位和绝对单位，第一个值为 x 轴方向的半径 (radius)，第二个值为 y 轴 半径
当然你也可以只设置一个值，说明你希望 x 轴 半径= y 轴 半径。（就像上面的例子一样）
语法很简单,就像w3c上能看到那样，本文重点并不在于语法（就像标题上写的那样），所以语法介绍就到这里
border-radius的等比缩小
- 相邻的两个角的半径值之和在x轴或y轴上不会超过了盒子宽或高（视觉上）。
- 当（设置的值）不满足第1条规则，则所有的半径都进行 等比缩小 直到满足第1条规则。
每一个角的弧来源于其所设置的
x轴 半径 和y轴 半径 所组成的椭圆与该角方位对应的弧（比如左上角的弧来源于椭圆左上角的弧）
示例1：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>border-radius</title>
<style>
div{
width: 200px;
height: 100px;
border-top-left-radius:1000px;
border-bottom-left-radius:1000px;
background-color: #aaa;
}
</style>
</head>
<body>
<div></div>
</html>
y轴半径不超过高度的一半
示例2：
div{
width: 200px;
height: 100px;
border-top-left-radius:1000px;
border-bottom-left-radius:2000px;
background-color: #aaa;
}
效果图：
菜刀状
从两个例子中发现等比缩小的情况很明显,接下来我们会用到这个规则
border-radius常见用法
1. 画椭圆（包括正圆）
盒子为正方形则画出来的是正圆
div{
width: 200px;
height: 100px;
border-radius: 50%;
background-color: #aaa;
}
效果图：
椭圆
我们改一下高度，让盒子成为正方形
height:200px;
效果图：
正圆
2. 画胶囊（包括正圆）
这个用到了 等比缩小 的规则，维护性要好些
div{
width: 200px;
height: 100px;
border-radius: 99999px;
background-color: #aaa;
}
效果图：
胶囊型状
当然，改一下高度也可从成为正圆形
height:200px;
效果图：
正圆
3. 倾斜的胶囊
div{
width: 200px;
height: 100px;
border-top-left-radius: 30% 100%;
border-bottom-right-radius: 30% 100%;
background-color: #aaa;
}
效果图：
倾斜的胶囊
改一下：
border-top-left-radius: 100% 100%;
border-bottom-right-radius: 100% 100%;
效果图：
叶子形状
4. 其他形状
圆润的椭圆形
div{
width: 200px;
height: 100px;
border-top-left-radius: 20% 100%;
border-top-right-radius: 20% 100%;
background-color: #aaa;
}
效果图：
圆润的梯形
类似胶囊型
div{
width: 200px;
height: 100px;
border-top-left-radius: 20% 100%;
border-bottom-left-radius: 20% 100%;
background-color: #aaa;
}
效果图：
类似胶囊型
类似三角形（可用作聊天气泡小三角）
div{
width: 200px;
height: 100px;
border-top-left-radius: 100%;
background-color: #aaa;
}
效果图：
类似三角形
网友评论