最近看了一本书， 《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"码上有钱"

需要购买阿里云各种产品，点击文字链领取阿里云通用打折劵