每日思考：切忌为了学习而学习，为了管理而管理，更好的方法是，朝着具体的目标去学习，在解决问题的路上不断的去学习，再通过学习反过来去更好的解决问题

本专栏致力于分享css技术，努力做到让大家快速回忆和快速上手该css技术。如果对你有帮助的话，别忘了点个赞奥✨。我是Wandra,我们下期再见

本质作用

通过定义元素边界上的曲线弧度来改变矩形元素的外观，从而使得直角变成圆角或椭圆角，从而允许开发者为 HTML 元素的边框创建圆角效果，即用一个水平半径为x px，垂直半径是y px的圆形图，紧贴在元素的各个角（或者指定的角），然后将各个角多余的部分裁剪掉，这样就有了圆角的效果。

生成工具

使用border-radius在线调试工具,再也不怕写参数啦，9elements.github.io/fancy-borde…

属性分类按照四个角分类

border-radius 是一个复合属性，可以分别控制四个角 的圆角半径。

语法：border-radius: 1-4 length|% */* 1-4 length|%;

按照水平和垂直方向分类

分别单独设置每一角：

语法：border-xx-xx-radius: length|% [length|%];

border-top-left-radius: xLength yLength 控制左上角的圆角。
border-top-right-radius: xLength yLength 控制右上角的圆角。
border-bottom-right-radius:xLength yLength 控制右下角的圆角。
border-bottom-left-radius:xLength yLength 控制左下角的圆角。

属性单位像素

如100px

百分比

使用百分数定义半径长度时，水平半径相对于盒模型的宽度；垂直半径相对于盒模型的高度

其他

比如em，vw等等

支持情况border-radius

参考资源

本专栏致力于分享css技术，努力做到让大家快速回忆和快速上手该css技术。如果对你有帮助的话，别忘了点个赞奥✨。我是Wandra,我们下期再见