知识储备

1.border-radius:该属性允许您为元素添加圆角边框

**Tips: **
1.border-radius可设置两组，分别为水平和竖直方向的圆角
2.border-radius简写的几种说明
2.1 四个值：顺时针从左上角开始（依次为从 左上角/右上角/右下角/左下角）
2.2 三个值：依次为 左上角/ 右上角（左下角）/ 右下角
2.1 二个值：依次为 左上角（右下角）/ 右上角（左下角）

小测试

1.一个简单的圆形
示例代码1
html

<div></div>

css

border-radius: 50%;

结果：

圆形

Tips: 当div宽高相同时，会形成圆形。当宽高不同时会形成椭圆

2.画一个两头圆的柱体
效果图：

类似IOS的按钮

示例代码2
css

width: 200px;
height: 100px;
border-radius: 50px;

3.为了更好地理解border-radius的水平和垂直两组值

我们来画一个半圆
效果类似

半个烙饼

思考：我们的左上和右上的水平radius为50%，而竖直的左上和右上为100%

思维图

css

border-radius: 50% 50% 0 0 /100% 100% 0 0;

这下子大家应该懂了吧，我以前一直以为只有四个radius很不理解。

来试试制作一些小的按钮

各种形状的按钮