2015-09-28 123 views
3

我正在嘗試使用針跡樣式設計半個圓的樣式。在Firefox中使用邊框半徑和邊框在圓上的針跡:虛線

但用我目前的代碼,它沒有得到在外面的虛線模式(我知道這是這樣做的border-radius)。

Chrome正在產生正確的結果,但在Firefox,我得到以下結果:

Current Result

我當前的代碼:

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; 
} 
+0

對我來說看起來很好,一定是你沒有發佈的一些CSS的問題:https://jsfiddle.net/Loy41h55/編輯:看起來它在Chrome中可用,但不是Firefox。 –

+0

這是在Chrome –

+0

@MaximillianLaumeister更正 – PrivatMamtora

回答

2

它實際上是一個已知的bug火狐未能渲染圍繞邊界半徑的虛線邊框:

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

該bug目前具有「ASSIGNED」狀態,所以如果運氣好的話,它很快就會被修復。


做更多的研究之後,似乎是涉及使用div:before pseudoelement解決方法 - 看this fiddle的演示。對於此解決方案,請登錄GCyrillus