很全但是超级易懂的border-radius讲解,让你快速回忆和上手

🍀 每日思考:切忌为了学习而学习,为了管理而管理,更好的方法是,朝着具体的目标去学习,在解决问题的路上不断的去学习,再通过学习反过来去更好的解决问题🥊
🍀 本专栏致力于分享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

参考资源

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

相关推荐
ggdpzhk几秒前
VUE:基于MVVN的前端js框架
前端·javascript·vue.js
学不会•2 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
活宝小娜4 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点5 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow5 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o5 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
开心工作室_kaic5 小时前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端
刚刚好ā5 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
沉默璇年7 小时前
react中useMemo的使用场景
前端·react.js·前端框架
yqcoder7 小时前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript