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

相关推荐
Mintopia几秒前
Three.js 物体碰撞试验学习指南
前端·javascript·three.js
编码七号12 分钟前
【axios取消请求】如何在token过期后取消未响应的请求
java·前端·javascript
张开心_kx13 分钟前
面试官又问我是否了解React的单向数据流
前端·javascript·react.js
残轩16 分钟前
Win10 家庭版 Docker 环境搭建详解(基于 WSL2)
前端·后端·docker
palpitation9717 分钟前
Flutter分解布局选择辅助方法还是Widget?
前端
工呈士18 分钟前
HTML响应式网页设计与跨平台适配
前端·html
作曲家种太阳19 分钟前
第六章节 响应式的 computed 实现【手摸手带你实现一个vue3】
前端
腊月廿二20 分钟前
跨项目频繁切换node版本号(nvm-windows)
前端
策码22 分钟前
MutationObserver监听网页二次渲染和子节点变化
前端·javascript
前端大白话22 分钟前
前端必知!HTML中`<a>`标签target属性全攻略:新窗口、当前窗口、指定框架一网打尽
前端·架构·html