今天在简书上发表新文章后发现,想知道下图的这个半圆是代码写的,还是图片?
这个弧形如果是图片的话,那么它的自动适配性也就太差了
后来发现,他这里居然是css控制的,于是就好奇起来,它是怎么做到的
在W3C上查border-radius属性时,会发现上面描述的语法是这样的:
border-radius : 1-4 length | % / 1-4 length | %;
这是什么意思呢,我也看不懂,后来百度了解到,这是border-radius的完整写法,我们平时的写法其实都是简写,平时我们写的border-radius : 50px,其实完整的写法应该是:
border-radius : 50px 50px 50px 50px / 50px 50px 50px 50px;
“/”前的四个数值表示圆角的水平半径,后面四个值表示圆角的垂直半径,什么是水平半径和垂直半径呢,见下图
根据水平半径和垂直半径的值,可以形成一个椭圆或者圆形,然后再根据这个去给元素设置圆角的弧度。利用border-radius的完整属性表达方式,可以设置一些个性的圆角样式,如下图(随便举个例子)