解释蛋形状中CSS3的用法

Question

我正在使用CSS3来构建随机形状.我被困在这个蛋形状上.我检查了蛋形的数学,它由2个不同半径的圆组成.但是我不能将这个基本结构与这里的CSS构建代码联系起来,特别是"border-radius"部分.

#egg {
display:block;
width:126px; 
/* width has to be 70% of height */
/* could use width:70%; in a square container */
height:180px;
background-color:green;

/* beware that Safari needs actual
px for border radius (bug) */
-webkit-border-radius:63px 63px 63px 63px/
108px 108px 72px 72px;
/* fails in Safari, but overwrites in Chrome */
border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
 }

Answer 1

5.1.曲线半径:'border-radius'属性

'border - * - radius'属性的两个长度或百分比值定义四分之一椭圆的半径,该半径定义外边缘边角的形状(参见下图).第一个值是水平半径,第二个值是垂直半径.如果省略第二个值,则从第一个值复制.如果长度为零,则角为方形,而不是圆角.水平半径的百分比表示边框的宽度,而垂直半径的百分比表示边框的高度.不允许使用负值.

border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;

.egg {
    display: block;
    width: 120px;
    height: 180px;
    background-color: green;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

<div class="egg"></div>

使用斜杠语法进一步读取边界半径.

Answer 2

根据边界半径规格

如果在斜线之前和之后给出了值，则斜线之前的值设置水平半径，斜线之后的值设置垂直半径。

您可以通过在顶部设置较大的垂直半径和在底部设置较小的垂直半径来创建鸡蛋形状。