边界不连续出现

Question

我试图像这样使用border-radius制作圆弧(在chrome中)

#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中工作正常

Answer 1

你可以用box-shadow伪造边框:http://jsfiddle.net/ZC2m2/

#elem {
  box-shadow:0 -2px 0  orange;
  width: 440px;
  height: 60px;
  border-top-right-radius: 220px 60px;
  border-top-left-radius: 222px 60px;
}

Answer 2

我想说这是某种错误。似乎与底部边框有关。它随着这个 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;
}

你所看到的切割顶部边框似乎底部边框在做奇怪的事情。但给它一个适中的半径似乎可以让它表现得更好。（我不知道为什么）

小提琴