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属性（这使得底部边框也可见）它变得连续。使底边颜色变为透明也无济于事。

e.g。 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;
}

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

fiddle

边界不连续出现

2 个答案: