我如何使用CSS创建圆角?


当前回答

随着对CSS3的支持在Firefox、Safari和Chrome的新版本中实现,看看“边界半径”也会有帮助。

-moz-border-radius: 10px;  
-webkit-border-radius: 10px;  
border-radius: 10px;

像任何其他CSS简写一样,上面也可以用扩展格式编写,从而实现左上角、右下角等不同的边界半径。

-moz-border-radius-topleft: 10px;  
-moz-border-radius-topright: 7px;  
-moz-border-radius-bottomleft: 5px;  
-moz-border-radius-bottomright: 3px;  
-webkit-border-top-right-radius: 10px;  
-webkit-border-top-left-radius: 7px;  
-webkit-border-bottom-left-radius: 5px;  
-webkit-border-bottom-right-radius: 3px;

其他回答

在创建Stack Overflow的早期,我看到了这一点,我找不到任何创造圆角的方法,让我感觉自己就像走过下水道一样。

CSS3最终定义了

border-radius:

这正是你想要的效果。虽然这在最新版本的Safari和Firefox中运行正常,但在IE7或Opera中就完全不行(我想在IE8中也不行)。

与此同时,这一切都是黑客所为。我很想听听其他人认为在IE7、FF2/3、Safari3和Opera 9.5之间实现这一点的最干净的方法是什么。

除了上面提到的htc解决方案,这里还有其他解决方案和例子来实现IE圆角。

自从引入CSS3以来,使用CSS添加圆角的最好方法是使用border-radius属性。你可以阅读属性的规范,或者在MDN上获得一些有用的实现信息:

如果您使用的浏览器没有实现border-radius (Chrome pre-v4, Firefox pre-v4, IE8, Opera pre-v10.5, Safari pre-v5),那么下面的链接详细介绍了一大堆不同的方法。找一个适合你的网站和编码风格的,然后使用它。

CSS设计:创建自定义角 &边界 CSS圆角'Roundup' 25圆角技术与CSS

如果你要使用边界-半径解决方案,有一个很棒的网站可以生成css,使它适用于safari/chrome/FF。

无论如何,我认为你的设计不应该依赖于圆角,如果你看看Twitter,他们只是对IE和opera用户说F****。圆角是一个很好的选择,我个人认为这是为那些不使用IE的酷用户保留的:)。

当然,这不是客户的意见。 链接如下:http://border-radius.com/

如果你对在IE中创建角感兴趣,那么这个可能会有用- http://css3pie.com/