（九）巧用CSS3之鸡蛋

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

绘制

天天吃鸡蛋，那我们就来用css来画一个鸡蛋。

容器

<div class="egg"></div>
复制代码

绘制鸡蛋图案我们准备一个div元素足以，接下来就是它的变身时刻。

样式

正常鸡蛋的尺寸应该是高5.0CM左右,中心直径3.5CM左右。所以我们给定容器的宽高比为：3:5。

工欲善其事必先利其器，在绘制鸡蛋图案之前，我们需要再了解一下 border-radius 属性，因为它是我们绘图的关键。

border-radius

我们先看一个例子：

.demo{
    width: 100px;
    height: 100px;
    background-color: red;
     /* 等价于 10% 20% 30% 40%/10% 20% 30% 40% ,即 水平半轴/垂直半轴  */
    border-radius: 10% 20% 30% 40%;
}
复制代码

此属性的四个值的作用是：从左上角到左下角顺时针方向使用。

1. 如果值为一个：代表四个角都是这个值。
2. 如果值为两个：代表对角的值相同，例如：a b === a b a b 。
3. 如果值为三个：代表第二个值与它的对角相同，例如：a b c === a b c b 。
4. 如果值为四个：顺时针方向作用。

此属性的值：可以是具体的数值，也可以是百分比，但是都不能为负值。

数值 定义圆形半径或椭圆的半长轴，半短轴。

百分比 使用百分数定义圆形半径或椭圆的半长轴，半短轴。值得我们注意的是：水平半轴相对于盒模型的宽度；垂直半轴相对于盒模型的高度。也就是说，当我们的容器宽高不一样的时候，同为 x% 弯曲的程度不一样。

鸡蛋

我们知道鸡蛋上小下大，两头又都是圆的。所以我们我们需要四个角的水平半轴设置为 50%，垂直半轴 前两个角的值大于后两个角的值。

.egg {
    --size: 100px;
    width: var(--size);
    height: calc(var(--size) * 5 / 3);
    border-radius: 50%/60% 60% 40% 40%;
    background-color: #fca;
    box-shadow: 0 calc(var(--size) * -0.2) calc(var(--size) * 0.15) rgba(200, 80, 0, .3) inset;
}
复制代码

总结

在绘制鸡蛋图案的时候要注意 border-radius 属性的使用，鸡蛋大小随--size的变化而变化。

想了解其他动画效果，请前往《有趣的动画》 专栏，希望对你有所帮助。