场景： 让盒子四个角变得圆润，增加页面细节，提升用户体验。

属性名： border-radius

常见取值： 数字+px、百分比

写法：

border-radius:50px;
或
border-radius:10%;

原理：

赋值规则： 从左上角开始赋值，然后顺时针赋值，没有赋值的看对角！

边框圆角的场景应用

画一个正圆：

  1. 盒子必须是正方形
  2. 设置边框圆角为盒子宽高的一半→border-radius:50%

胶囊按钮：

  1. 盒子必须是长方形
  2. 设置→border-radius:盒子高度的一半
End
最后修改：2021 年 12 月 22 日
© 允许规范转载
如果觉得我的文章不错，请随手点赞~