border-radius完整结构形式（扩展了解一下）

今天在上发表新文章后发现，想知道下图的这个半圆是代码写的，还是图片？

这个弧形如果是图片的话，那么它的自动适配性也就太差了

后来发现，他这里居然是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的完整属性表达方式，可以设置一些个性的圆角样式，如下图（随便举个例子）