圆角边框

296 阅读1分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第决15天 首先我们要先写一个div盒子出来,给div加上一个width宽度和height高度,再添加一个背景颜色,这样一个盒子就显现出来了,接下来我们就上代码图和效果图吧:

image.png

当我们想要把一个长方形盒子或者正方形盒子变成圆形的时候,我们可以这样做,在盒子的代码中加入圆角的属性: border-radius=

下面我们来展示下代码图和效果图:

image.png

如果我们只想要把正方形的四个角变成圆角的话,我们只需要把border-radius=的数值变成像素值即可,像素值越小,圆角的弧度就越小,例如我们把数值改成10px:

image.png

当我们把数值改成50px时,我们再来看它的圆角是怎样的:

image.png

当我们的圆角数值越接近边框值的50%时,那么这个正方形也就越接近圆形了。