🍀 每日思考：切忌为了学习而学习，为了管理而管理，更好的方法是，朝着具体的目标去学习，在解决问题的路上不断的去学习，再通过学习反过来去更好的解决问题🥊
🍀 本专栏致力于分享css技术，努力做到让大家快速回忆和快速上手该css技术。如果对你有帮助的话，别忘了点个赞奥✨。我是Wandra,我们下期再见🌷
本质作用
🍀 通过定义元素边界上的曲线弧度来改变矩形元素的外观，从而使得直角变成圆角或椭圆角，从而允许开发者为 HTML 元素的边框创建圆角效果，即用一个水平半径为x px，垂直半径是y px的圆形图，紧贴在元素的各个角（或者指定的角），然后将各个角多余的部分裁剪掉，这样就有了圆角的效果。
- 影响定义了border-radius的背景： 当一个元素具有非透明的背景色或背景图像时，将影响背景的绘制区域，使其按照圆角的形状显示，其具体效果受到background-clip的影响。
- 影响定义了border-radius的边框：它还会影响元素的边框形状，使得边框也能跟随圆角的轮廓。
生成工具
🍀 使用border-radius在线调试工具,再也不怕写参数啦，9elements.github.io/fancy-borde...
属性分类
按照四个角分类
🍀
border-radius是一个复合 属性，可以分别控制四个角 的圆角半径。🍀 语法：
border-radius: 1-4 length|% */* 1-4 length|%;
-
💡 即 border-radius: a b c d / e f g h ，border-radius属 性接受两个参数，分别表示水平半径 和垂直半径 ，两个参数用
/分隔开，无论是水平半径还是垂直半径，都可以设置1 ~4个参数值，/ 前的四个值分别表示表示上左、上右、下左、下右的水平半径大小， / 后面的四个值分别表示上左、上右、下左、下右的垂直方向上的半径大小。 -
💡 a b c d e f g h 都可以省略不写，对于水平和垂直方向的四个值，如果省略 bottom-left，则与 top-right 相同。如果省略 bottom-right，则与 top-left 相同。如果省略 top-right，则与 top-left 相同。
-
💡 如果水平方向上设置的两个半径或者垂直方向上设置的两个半径加起来超过了元素的宽或者元素的高，比如一个设置 100%，一个设置成 300%，加起来就 400% 了（超过 100% 了），那么实际上一个真正分得元素实际宽度或者高度的 1/4，另一个真正分得实际宽度或者高度的 3/4；如果水平方向上设置的两个半径或者垂直方向上设置的两个半径加起来没有超过了元素的宽或者元素的高，那么就按实际设置的那样出效果。
-
💡一图胜千言，上面用法可以用图表示下面这个样子：
按照水平和垂直方向分类
🍀 分别单独设置每一角：
🍀 语法：border-xx-xx-radius: length|% [length|%];
less
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
参考资源
- 博客园： www.cnblogs.com/qianxiaox/p...
- 掘金：juejin.cn/post/729677...
- w3school: www.w3school.com.cn/cssref/pr_b...
🍀 本专栏致力于分享css技术，努力做到让大家快速回忆和快速上手该css技术。如果对你有帮助的话，别忘了点个赞奥✨。我是Wandra,我们下期再见