15

我正在使用 CSS3 来构建随机形状。我被这个蛋形卡住了。我检查了 Egg Shapes 的数学，它由 2 个不同半径的圆组成。然而，我无法将这个基本结构与这里的 CSS 构建代码联系起来，尤其是“边界半径”部分。

#egg {
  display:block;
  background-color:green;
  width:126px; 

  /* width has to be 70% of height */
  /* could use width:70%; in a square container */
  height:180px;

  /* 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%;
}
4

3 回答 3

19

5.1。曲线半径：“边界半径”属性

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

使用斜线语法进一步阅读边界半径。

于 2013-09-13T23:15:11.097 回答
4

根据边界半径的规范

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

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

于 2013-09-13T23:13:18.350 回答
2

您的边界半径分为：

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%。
于 2013-09-13T23:17:05.317 回答