说明蛋形CSS3的用法 [英] Explain the usage of CSS3 in an Egg Shape

问题描述

我正在使用CSS3建立随机形状.我被卡在这个蛋形上.我检查了蛋形的数学原理，它由2个半径不同的圆组成.但是，我无法在此将基本结构与CSS构建代码(特别是边界半径"部分)相链接.

I am using CSS3 to build up random shapes. I am stuck on this Egg Shape. I checked upon the mathematics of Egg Shapes, which are composed by 2 circles with different radius. Yet I can't link this fundamental construction with the CSS buildup code here, especially the "border-radius" part.

#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%;
 }

推荐答案

5.1.曲线半径:边界半径"属性

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

The two length or percentage values of the ‘border-*-radius’ properties define the radii of a quarter ellipse that defines the shape of the corner of the outer border edge (see the diagram below). The first value is the horizontal radius, the second the vertical radius. If the second value is omitted it is copied from the first. If either length is zero, the corner is square, not rounded. Percentages for the horizontal radius refer to the width of the border box, whereas percentages for the vertical radius refer to the height of the border box. Negative values are not allowed.

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 on border radius with slash syntax.

这篇关于说明蛋形CSS3的用法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！