虚线边框

Question

我有点缀边框，看起来很合适，但在firefox中看起来不合适。

.circle {
    border: 1em dotted #235ea4;
    border-radius: 7em;
    height: 7em;
    margin: 2em auto 0;
    padding: 2em;
    text-align: center;
    width: 7em;
}

Demo

请帮助解决这个问题。

Answer 1

是一个开放的mozilla firefox错误 https://bugzilla.mozilla.org/show_bug.cgi?id=382721

Answer 2

@Bhumi Shah你试图解决的问题是无法实现只使用CSS。如果你可以使用SVG，那么SVG就可以成为解决方案。使用SVG，您可以创建带有虚线边框的圆角圆。看看使用SVG制作的DEMO。

＆＃13;

＆＃13;

<svg width="300px" height="300px" viewBox="0 0 300 300" style="border:1px solid #000;">
<circle cx="100" cy="100" r="90" 
stroke="#448800" stroke-dasharray="20,10" stroke-width="20"
fill="none" />

＆＃13;

＆＃13;

＆＃13;

Answer 3

这是Firefox中的一个错误https://bugzilla.mozilla.org/show_bug.cgi?id=382721 - 它于2007年开放，但尚未修复。