Chrome，Opera，Safari的CSS3邊框半徑問題

Question

我試圖向某些div添加圓角並且似乎無法找到解決方案時遇到了此問題。我使用這個CSS分配給的div類：

-moz-box-shadow: 0px 5px 5px #cccccc; 
-webkit-box-shadow: 0px 5px 5px #cccccc; 
box-shadow: 0px 5px 5px #cccccc; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 
-khtml-border-radius: 5px; 
border-radius: 5px; 

下面是它是如何在Chrome中顯示出來，Safari和Opera：

這裏是如何顯示在Firefox和IE9：

這看起來好像在Chrome和其他後臺莫名其妙地夾在了BAC上邊框中的kground顏色。唯一與彩色頂部邊框相關的CSS是：

border-top:8px solid #333333; 

任何想法？

Answer 1

入住此琴在各種瀏覽器：

http://jsfiddle.net/QVS9X/

當您刪除border-radius，一切都恢復了正常。您可能在border-radius的Webkit和Opera實現中發現了一個錯誤。檢查它是否沒有被報告，如果沒有，你可能想報告它:)。

[編輯]

我很肯定這是一個錯誤。

1. 只表現在Chrome &歌劇
2. 的錯誤看起來不同的Chrome和Opera
3. 錯誤部分僅涉及超過邊界半徑的價值邊框的寬度（即，對於border-radius：10px和邊框寬度10px，沒關係）
4. 正確渲染的部分與border-radius的值一樣寬。

我很積極，應該向Opera和Webkit團隊報告。

Answer 2

這個，我懷疑是瀏覽器如何選擇渲染具有部分邊框的框以及border-radius的問題。我不認爲這是你自己可以解決的問題（嘗試爲其他方面設置白色邊框？我不知道這是否會起作用），而沒有采用完全不同的方法。

有是某種標準the spec正在起草（尤其是§5.4 Color and Style Transitions）爲箱邊界與圓角半徑究竟應該呈現，如果你傾向於看看它。但最終，瀏覽器如何繪製邊界和圓角，跨平臺的一致行爲將很難在沒有合作的情況下實現。