很全但是超级易懂的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,我们下期再见

相关推荐
逐·風3 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫4 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦4 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子5 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山5 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享6 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
清灵xmf8 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨8 小时前
VUE+Vite之环境文件配置及使用环境变量
前端
GDAL8 小时前
npm入门教程1:npm简介
前端·npm·node.js
小白白一枚1119 小时前
css实现div被图片撑开
前端·css