最近看了一本书， 《css揭秘》[希] LEA VEROUS 著
都是关于css3之类的标签属性之类的；今天演示一下：border-radius这个属性；【因为总觉得作者的数学不是很好，不过还是很感谢她的】
首先我们要接受 【border-radius: 50% / 50%】,第一个百分之50%，代表水平方向的距离，第二个代
竖直方向的距离；
现在我们border-radius:50% / 50% 展开：border-radius:50% 50% 50% 50% /50% 50% 50% 50% 颜
色相对应的都是指同一个角
首先我们要理解椭圆或圆是怎么画的，椭圆的话，我们首先要知道椭圆的长半径和短半径确定中心点，同理
画圆也需要半径确定中心点；所以重点便是【中心点的选择】
我们都知道 border-radius: 50%时,那么就会变成椭圆
然而真真的原理就在这个时刻哦：
首先我们先理解：这个椭圆是由四个1/4的椭圆组成，正好对应四个角；让每个角都变成1/4的椭圆就是我们
所需要做的；
首先左上角要形成四分之一椭圆，那么图上的两个红心的交点便是中心点；这个中心点的位置：就是其水平
距离50%，竖直距离是50%；同样：其他三个角也是这样；
懂了没？
看看我做的形状：
再来演示第二个border-radius：
首先我们可以确定：
第一个角的中心点： 水平方向50%，竖直是100%;
第二个角的中心点： 水平方向0， 竖直方向0；
第三个角的中心点： 水平方向50%， 竖直是100%；
第四个角的中心点： 水平方向0， 竖直方向0；
转载或引用本网版权所有之内容须注明“转自（或引自）云栖社区”字样，并标明本网网址yq.aliyun.com
谢谢大家，获取更多精华技术IT资讯，请持续关注云栖社区“达摩老祖”and"码上有钱"
