【CSS·圆角边框】有关 border-radius 属性的记录以及实现原理
1、前言
大家好，我是翼同学。今天笔记的内容是：
圆角边框：border-radius
2、内容
在 CSS 中，新增了圆角边框样式。我们通过 border-radius 属性，设置元素外边框的圆角属性。即使元素没有设置边框 border，圆角边框属性也可以应用到 background 上，其具体效果受到 background-clip 的影响。
语法如下：
解析：
border-radius 属性接受两个参数，分别表示水平半径和垂直半径，两个参数用
/分隔开；如果第二个参数省略，则默认等于第一个参数的值
无论是水平半径还是垂直半径，都可以设置 1~4 个参数值；
并且参数值的类型也有两种：长度或百分比，二者都不允许出现负值；
使用百分数定义半径长度时，水平半径相对于盒模型的宽度；垂直半径相对于盒模型的高度；
该属性没有继承性
另外，border-radius 属于简写属性，具体属性如下：
左上角：border-top-left-radius
右上角：border-top-right-radius
右下角：border-bottom-right-radius
左下角：border-bottom-left-radius
因此规则如下：
如果 border-radius 属性接受四个值，那么将按照上左、上右、下右、下左的顺序分别作用于四个角；
如果 border-radius 属性接受三个值，则第一个值作用于上左 border-top-left-radius，第二个值作用于上右 border-top-right-radius 和下左 border-bottom-left-radius，第三个值作用于下右 border-bottom-right-radius
如果 border-radius 属性接受两个值，则第一个值作用于上左和下右，第二个值作用于上右和下左；
如果 border-radius 属性只接受一个值，此时将作用于四个角。
该规则适用于水平半径与垂直半径。
举个例子：
上述 CSS 代码相当于：
3、原理
那么，圆角边框的原理究竟是什么？
举个例子：
上述圆角边框的效果 实现的原理在于：
用一个水平半径为 70px，垂直半径也是 70px 的圆形图，紧贴在左上角
此时将左上角多余的部分裁剪掉，这样就有了圆角的效果
示意图如下：
再举一个例子：
效果为：
此时效果的实现原理在于：
将一个水平半径为 50px，垂直半径是 80px 的椭圆，紧贴在左上角
再将左上角多余的部分裁剪掉，这样就有了圆角的效果
示意图如下：
4、写在最后
好了，今天的笔记就记到这里。
版权声明: 本文为 InfoQ 作者【翼同学】的原创文章。
原文链接:【http://xie.infoq.cn/article/63722c3d23134866d91a09721】。文章转载请联系作者。
知行合一 2022.08.02 加入
@珠海科技学院
评论