本文共 1276 字，大约阅读时间需要 4 分钟。

椭圆

自适应的椭圆

为任何正方形元素设置一个足够大的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这个简写方式，只是需要用空格来隔开为每个角设置的值，另外，这四个值会分别从左上角开始以顺时针顺序应用到元素的拐角。

如果要为四个角设置不同的水平和垂直半径，方法是在斜杠前指定1_{4个值，在斜杠后指定另外1}4个值。斜杆前设置的垂直半径，斜杠后是水平半径。

如果我们需要得到一个垂直的半椭圆形，就需要考虑为元素每个角设置的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的内容最好多加练习，并多多查看官方文档。

转载地址：https://blog.csdn.net/PeZXO/article/details/106183471 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！