2012-03-06 94 views
7

我有一個div,我正在應用圓角。Firefox中的圓角:邊框和背景之間的空間

這是我的demo fiddle

<div>&nbsp;</div> 
div { 
    margin: 20px; 
    width: 250px; 
    height: 250px; 
    -moz-border-radius: 15px; 
    -webkit-border-radius: 15px; 
    -khtml-border-radius: 15px; 
    border-radius: 15px; 
    background-color: #4c66a1; 
    border: 2px solid #4c66a1; 
} 

我也有適用於這個div邊框和背景顏色。這個問題出現在Firefox中。邊框和div的背景顏色之間有少量空白(請參閱下圖)。這是非常小的,但人們已經注意到它。它看起來像角落裏的燈光效果。

這是一個在Firefox中帶圓角的已知問題嗎? IE,Chrome和Opera都很好。

供參考/爲了說明問題,我已經使邊框和背景顏色相同,即使它是多餘的。它使得空白更突出。

 Firefox  Chrome/IE/Opera

enter image description here                 enter image description here

+0

它沒有重現當我改變顏色爲紅色 – FosterZ 2012-03-06 17:21:49

+0

@FosterZ:紅色仍然適合我。不太明顯。將曲線半徑最大爲50,你會看到它,只是。編輯:實際上,我仍然可以在15歲看到它,鷹眼睛;) – musefan 2012-03-06 17:22:58

+0

是的,這就是爲什麼我在樣本中使用類似的顏色來更好地說明問題。明亮的顏色會讓你的眼睛遠離它,這個問題不太明顯。如果你真的想看到它發生,嘗試使用邊界半徑創建一個圓。空白將包圍整個div。 – 2012-03-06 17:26:53

回答

3

有趣的是,如果我們將其更改爲點綴,白色的消失:

div { 
    margin: 20px; 
    width: 250px; 
    height: 250px; 
    -moz-border-radius: 30px; 
    -webkit-border-radius: 30px; 
    -khtml-border-radius: 30px; 
    border-radius: 30px; 
    background-color: #4c66a1; 
    border: 2px dotted #4c66a1; 
} 

http://jsfiddle.net/5yAkZ/23/

編輯了無效的CSS以前

+0

這是無效的CSS。你必須指定一個樣式,否則邊框將不會顯示。 – 2012-03-06 18:07:01

+0

你是對的,我的是無效的。但是,如果我們將其更改爲虛線,則問題似乎消失(至少在我的結尾) - 就像具有圓形實心邊框的錯誤。 – Chris 2012-03-06 18:18:23

+0

哇,真的很好趕上!從這個我做了一些試驗,發現如果你使用'double'風格......問題就解決了!由於我的邊框只有'2px',所以你實際上無法檢測到雙邊框,只有在大於3px的位置纔會分割成2個不同的邊框。非常感謝您的幫助!這應該在某個地方的錯誤報告中提交... – 2012-03-06 18:27:51

0

檢查了這一點這是你想要 JsFiddle

<div id='ex1' class='exampleRound'>&nbsp;</div> 
#ex1{ 
    border-radius: 50px; 
    height: 200px; 
    width: 200px; 
} 
.exampleRound { 
    background: none repeat scroll 0 0 #4c66a1; 
    border: 5px solid pink; 
    font-size: 20px; 
    font-weight: bold; 
    margin-bottom: 30px; 
    padding: 20px 40px; 
    margin:20px 
} 
+0

將這些鮮豔的顏色切換爲柔和色調,問題仍然存在。 – 2012-03-06 18:05:05

+0

:)告訴我的顏色,因爲我現在看不到它.. – FosterZ 2012-03-06 18:14:17