border-radius圆角边框问题

1,613 阅读4分钟

一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第1天,点击查看活动详情

这个帖子分享一下我对border-radius圆角边框的思考。初学时我以为border-radius是用来画圆形的,对于这个属性具体使用不是很清楚,后来遇到了字节的一道面试题 "用css 画一个扇形"......


border-radius


border-radius有几个值?

border-radius属性其实是border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius四个属性的简写模式
举个例子:

div {
            width: 200px;
            height: 200px;
            background-color: pink;
            border-radius: 10px;
            margin: 100px auto;
        }

为这个盒子设置border-radius:10px; 就相当于用一个半径为10px的圆形去切盒子的左上角,右上角、右下角、左下角。

image.png

我们试试百分比的写法

div {
            width: 200px;
            height: 200px;
            background-color: pink;
            border-radius: 50%;
            margin: 100px auto;
        }

当我们设置了border-radius:50%;
我们理所当然的看到了一个圆形

image.png

初学者如果是给宽高一样的盒子设置border-radius,那么太棒了,到此为止还不会遇到什么问题

接下来我们试试宽高不同的盒子会发生什么情况

div {
            width: 400px;
            height: 200px;
            background-color: pink;
            border-radius: 10px;
            margin: 100px auto;
        }

image.png
你发现border-radius:10px;在宽高不同的盒子下的行为是一样的,都是在四个角落,用半径为10px的圆形去切盒子的角。

咱们看看百分比写法会发生什么?

div {
            width: 400px;
            height: 200px;
            background-color: pink;
            border-radius: 50%;
            margin: 100px auto;
        }

image.png
这时候初学者想像刚刚一样在脑子还原一下过程可能会卡壳,一时半会儿可能猜不到这个50%的圆角边框的执行过程是怎样的。我当时遇到的就是这个问题,后来我查阅了文档后发现,border-radius完整的写法有8个值,4个值或者1个值的写法只是简写,最后还是会还原成8个值

举个例子:
border-radius:10px; 等于 border-radius:10px 10px 10px 10px 也等于 border-radius:10px 10px 10px 10px / 10px 10px 10px 10px
带斜杠/表示水平半径和垂直半径分开设置(8个值的写法)
不带斜杆的表示水平半径和垂直半径统一设置(4个值的写法)

border-radius的8个值分别代表: 左上角水平半径 右上角水平半径 右下角水平半径 左下角水平半径/左上角垂直半径 右上角垂直半径 右下角垂直半径 左下角垂直半径;

其实你真正设置的是一个椭圆,它的模型是这样的:

image.png
你可以通过对应位置的值去设置每个位置的椭圆形状,这个椭圆形状去切这个盒子对应的位置,就会呈现出不同的样式,这个玩意儿好像还挺看你美术功底?

所以我再来看看刚刚的代码

div {
            width: 400px;
            height: 200px;
            background-color: pink;
            border-radius: 50%;
            margin: 100px auto;
        }

现在我们知道border-radius:50%是一个简写
它等同于 border-radius:50% 50% 50% 50%
等同于 border-radius:50% 50% 50% 50% /50% 50% 50% 50%
在这里表示:
四个角的椭圆的形状的水平半径为宽的50% 也就是200px
四个角的椭圆的形状的垂直半径为高的50% 也就是100px
也就是拿水平半径为200px 垂直半径为100px的椭圆去切四个角角
emm,不一定是同样的椭圆,你可以分别设置不同的椭圆去切,你知道了border-radius的8个值之后,你就能乱来了


然后关于那道面试题,我看到了有个学长总结的挺不错,这里借用一下,传送入口
有仔细阅读这个学长写的代码会发现,他给宽高为0的CSS三角设置了圆角边框。这个我打算写到CSS三角那边,等我更新了再放传送入口0 0


应该没漏什么没讲的,有的话之后会补充,谢谢各位爷捧场~