CSS边框圆角介绍及案例

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

属性名:border-radius

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

写法:

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

原理:

赋值规则:从左上角开始赋值,然后顺时针赋值,没有赋值的看对角!

边框圆角的场景应用

画一个正圆:

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

 

胶囊按钮:

  1. 盒子必须是长方形
  2. 设置→border-radius:盒子高度的一半

 

给TA打赏
共{{data.count}}人
人已打赏
知识碎片

CSS鼠标光标常见样式类型

2021-11-27 15:44:03

知识碎片

不完善版队列

2021-11-27 20:39:19

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧