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

Question

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

请看下面角落附近的图像，问题只出现在Firefox 44和46上，在Chrome 49上看起来很好。

它看起来像FF中的一个错误 。 我知道边界半径在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渲染是特定于浏览器的，我认为唯一的解决方法是使用图像 。