15

CSS3 を使用してランダムな形状を構築しています。私はこのエッグシェイプにこだわっています。半径の異なる 2 つの円で構成される卵形の数学を調べました。しかし、この基本的な構造を、ここにある CSS ビルドアップ コード、特に「border-radius」の部分とリンクすることはできません。

#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

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

左上のものをさらに分解しましょう。

  • 最初の値は水平方向の半径で、境界線が幅の半分に切り上げられることを意味します。
  • 2 番目の値は垂直方向の半径のため、曲線は要素の高さの 60% まで下がります。
于 2013-09-13T23:17:05.317 に答える