使用邊框半徑時扭曲的圓圈

在我的頁面中，我在左上角有一個菜單圖標，它被包裹在一個圓圈內，所以我使用了CSS3邊框半徑。使用邊框半徑時扭曲的圓圈

但是圓圈並不那麼光滑，我在拐角處發生了一些變形。有什麼辦法可以讓它流暢嗎？

如果高度和寬度都增加了，我就會得到沒有變形的圓形。

#container{ 
 
    width:400px; 
 
    height:400px; 
 
    background:#000; 
 
    padding:100px; 
 
    } 
 
#circle{ 
 
    width:40px; 
 
    height:40px; 
 
    border-radius: 50%; 
 
    border:1px solid white; 
 
    }

<div id="container"> 
 
    <div id="circle"></div> 
 
</div>

來源

2014-09-29 Raja Sekar

當我看着你的演示中，我沒有看到任何失真（iPad的空氣，Safari瀏覽器，適用於iOS 7 ）。 – 2014-09-29 13:11:34

+1使用代碼段功能。 – 2014-09-29 13:11:39

你能添加一個顯示失真的截圖嗎？對我來說很好（OSX小牛隊的Chrome 37） – LuudJacobs 2014-09-29 13:37:39

閱讀本 http://www.sitepoint.com/how-to-get-smoother-rounded-corners/ 做還是讓我知道，如果這有助於

來源

2015-03-27 07:23:02

謝謝，我讀過那篇文章和問題解決了 – 2015-03-27 07:24:50

儘管鏈接可能包含問題的答案，請嘗試在此處添加相關部分，以便即使其他網站往下走。 – niyasc 2015-03-27 07:30:15

使用邊框半徑時扭曲的圓圈

回答

相關問題