解释蛋形状中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. Curve Radii: the ‘border-radius’ properties

     

'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>

使用斜杠语法在边界半径上

Further reading。

Answer 2

每specification on the border radius

  

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

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

Answer 3

您的边界半径分为：

border-bottom-left-radius: 50% 40%;
border-bottom-right-radius: 50% 40%;
border-top-left-radius: 50% 60%;
border-top-right-radius: 50% 60%;

让我们进一步分解左上角：

• 第一个值是水平半径，表示边框向上舍入到宽度的一半。
• 第二个值是垂直半径，因此曲线下降到元素高度的60％。