css - 边框不连续

Question

我正在尝试使用这样的边界半径制作弧线（在 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/

无法理解这里有什么问题？

我只为 chrome 尝试这个。在 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;
}

您所看到的切割顶部边框似乎底部边框在做奇怪的事情。但是给它一个适中的半径似乎会以某种方式让它表现出来。（我不知道为什么）

小提琴