爱站程序员基地椭圆
- 椭圆
- 自适应的椭圆
- 半椭圆
- 四分之一椭圆
椭圆
自适应的椭圆
为任何正方形元素设置一个足够大的
border-radius
，就可以把它变成一个圆：
background: #fb3;width: 200px;height: 200px;border-radius: 100px;
border-radius
指定了我们要得到的圆的半径，但是这一数值在大于一半容器大小的情况下，依然会得到一个圆。
然而我们更希望它能根据其内容自动调整并适应。在这个案例中，我们希望得到一个能依据宽高变形为椭圆或圆的自适应圆。
border-radius
存在一个效果：它可以单独指定水平与垂直的半径，只需要用一个斜杠（/）分隔这两个值即可。这个特性允许我们在拐角处创建椭圆圆角。
如果
border-radius
的宽高是容器的宽高的一半，那么将得到一个精确的椭圆，恰好
border-radius
允许使用百分比值：
border-radius: 50% / 50%;
然而由于
border-radius
的宽高被设置成了同样的50%，我们可以使用更加简洁的方式。
border-radius: 50%;
半椭圆
现在我们能够生成一个自适应的椭圆了，接下来我们要生成的是半椭圆形。
border-radius
允许我们用展开的方式，分别设置它每个角的值：
-
border-top-left-radius
-
border-top-right-radius
-
border-bottom-right-radius
-
border-bottom-left-radius
我们仍可以使用
border-radius
这个简写方式，只是需要用空格来隔开为每个角设置的值，另外，这四个值会分别从左上角开始以顺时针顺序应用到元素的拐角。
如果要为四个角设置不同的水平和垂直半径，方法是在斜杠前指定14个值，在斜杠后指定另外14个值。斜杆前设置的垂直半径，斜杠后是水平半径。
如果我们需要得到一个垂直的半椭圆形，就需要考虑为元素每个角设置的
border-radius
的情况，由于这个半椭圆形是垂直的，则它的左右两边对称，唯一需要注意的应当是下面两个角的垂直半径设置成0，上边两角设置成100%，水平的半径每个角都为50%（要多想）。
.box1{width: 100px;height: 200px;border-radius: 50% / 100% 100% 0 0;background-color: #ffcc33;}
四分之一椭圆
和半椭圆形的设置是一样的，无非是每个角的
border-radius
设置的不一样。
.box2{margin: 10px;width:200px;height:100px;background-color: #fcc;border-radius: 0 100% 100% 0 / 0 0 100% 100%;}
本篇文章是《css揭秘》一书的笔记，如果侵犯到了原作者的权益，请联系我删除。
有关border-radius的内容最好多加练习，并多多查看官方文档。
