边框不连续答案

【问题标题】：Border not appearing continuous边框不连续
【发布时间】：2013-07-04 00:17:56
【问题描述】：

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

【问题讨论】：

看起来和你的身高有关。如果我将高度提高到 90 像素，那很好。你的盒子只需要 60px 高吗？
或者你可以像这样作弊jsfiddle.net/kFxec/6 :)
它也适用于小宽度，但实际上在我的情况下，宽度/高度不是静态的，我根据宽度和高度动态分配边框半径。比如水平半径是宽度的 50%，垂直半径是高度的 100%。用正确的宽度值更新了问题。

标签： css google-chrome

【解决方案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;
}

【讨论】：

这个解决方法很棒，但不幸的是，在我们的产品中，我们实际上使用的是虚线边框样式。我写了这个，例如找出问题所在。可能是它的浏览器错误，而不是我应该使用您的解决方案。

【解决方案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

【讨论】：