5

このような境界半径を使用して円弧を作成しようとしています(クロムで)

#elem {
  border: 2px solid orange;
  border-bottom: none;

  width: 440px;
  height: 60px;
  border-top-right-radius: 220px 60px;
  border-top-left-radius: 222px 60px;
}

しかし、弧は連続していません。border-bottom プロパティを削除すると (下の境界線も表示されるようになります)、連続したものになりました。下枠の色を透明にすることも役に立ちません。

例http://jsfiddle.net/kFxec/9/

ここで何が悪いのか理解できませんか？

これをクロムのみで試しています。Firefox では問題なく動作します

4

2 に答える 2

1

私はそれがある種のバグだと言うでしょう。下の境界線に関連しているようです。このCSSで消える

#elem {
  border: 2px solid orange;
  border-bottom: none;

  width: 440px;
  height: 60px;
  border-top-right-radius: 220px 60px;
  border-top-left-radius: 222px 60px;
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px;
}

上部の境界線をカットしているのは、下部の境界線が奇妙なことをしているように見えます。しかし、適度な半径を与えると、どういうわけか動作するようです。（どうしてか分かりません）

フィドル

于 2013-07-03T16:17:56.920 に答える