使用边框半径时扭曲的圆圈

在我的页面中，我在左上角有一个菜单图标，它被包裹在一个圆圈内，所以我使用了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

使用边框半径时扭曲的圆圈

回答

相关问题