css - 使用 border-radius 和 border : dashed 在 Firefox 中的圆圈上缝合

Question

我正在尝试用针迹图案设计一个半圆。

但使用我当前的代码，它没有在外部获得虚线图案(我知道它是 border-radius 这样做的)。

Chrome 生成了正确的结果，但在 Firefox 中我得到了以下结果:

我当前的代码:

a#middle-left-circle{
    display:block;
    width: 90px;
    height: 180px;
    background: #117300;
    border-radius: 0 180px 180px 0;
    -moz-border-radius: 0 180px 180px 0;
    -webkit-border-radius: 0 180px 180px 0;
    border: 2px dashed  #ffffff;
    box-shadow: 0 0 0 4px #117300;
}

Answer 1

Firefox 无法在 border-radiuses 周围呈现虚线边框实际上是一个已知错误:

https://bugzilla.mozilla.org/show_bug.cgi?id=382721

该错误目前的状态为“已分配”，所以运气好的话它可能很快就会得到修复。

---

经过更多研究后，似乎有一种解决方法涉及使用 div:before 伪元素 - 请参阅 this fiddle一个演示。感谢GCyrillus对于这个解决方案。