应用border-radius的虚线边框在Firefox中的长度错误

Question

我注意到在div上应用虚线边框与border-radius一起创建＆＃34;虚线＆＃34;错误的长度。

请查看角落附近的图片，问题仅出现在Firefox 44和46上，并且在Chrome 49上看起来很正常。

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

＆＃13;

＆＃13;

*,
*: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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

使用border的css属性无法实现。

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