知识储备
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很不理解。
来试试制作一些小的按钮
各种形状的按钮
网友评论