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

相关推荐
zhougl9961 小时前
html处理Base文件流
linux·前端·html
花花鱼1 小时前
node-modules-inspector 可视化node_modules
前端·javascript·vue.js
HBR666_1 小时前
marked库(高效将 Markdown 转换为 HTML 的利器)
前端·markdown
careybobo2 小时前
海康摄像头通过Web插件进行预览播放和控制
前端
杉之4 小时前
常见前端GET请求以及对应的Spring后端接收接口写法
java·前端·后端·spring·vue
喝拿铁写前端4 小时前
字段聚类,到底有什么用?——从系统混乱到结构认知的第一步
前端
再学一点就睡4 小时前
大文件上传之切片上传以及开发全流程之前端篇
前端·javascript
木木黄木木5 小时前
html5炫酷图片悬停效果实现详解
前端·html·html5
请来次降维打击!!!6 小时前
优选算法系列(5.位运算)
java·前端·c++·算法
難釋懷6 小时前
JavaScript基础-移动端常见特效
开发语言·前端·javascript