html - 带有应用边框半径的虚线边框在 Firefox 中长度错误

Question

我注意到在 div 上应用虚线边框和 border-radius 会创建长度错误的“虚线”。

请查看下面 Angular 落附近的图片，该问题仅出现在 Firefox 44 和 46 上，在 Chrome 49 上看起来很好。

看起来像a bug in FF .我知道 border-radius 在 FF 上有问题，但我想知道是否有解决方法。

*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#target {
  width: 300px;
  height: 300px;
  background-color: red;
  border: 10px dashed purple;
  -moz-border-radius: 30px;
  -webkit-border-radius: 30px;
  border-radius: 30px;
}

<div id="target"></div>

Answer 1

使用 border 的 css 属性你不能实现它。

CSS 渲染是特定于浏览器的，我认为唯一的解决方法是使用图像。