我如何使用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之间实现这一点的最干净的方法是什么。

没有“最好”的方法;有适合你的方法也有不适合你的方法。话虽如此,我在这里发布了一篇关于创建CSS+图像的流畅圆角技术的文章:

使用CSS和图像的圆角盒子-第2部分

这个技巧的概述是使用嵌套的div和背景图像重复和定位。对于固定宽度的布局(固定宽度可拉伸的高度),你需要三个div和三张图片。对于流体宽度布局(可拉伸宽度和高度),您需要9个div和9张图像。有些人可能会认为这太复杂了,但恕我直言,这是有史以来最简洁的解决方案。没有黑客,没有JavaScript。

Ruzee Borders是我发现的唯一一个基于javascript的反锯齿圆角解决方案,适用于所有主流浏览器(Firefox 2/3, Chrome, Safari 3, IE6/7/8),也是唯一一个在圆角元素和父元素都包含背景图像时工作的解决方案。它还可以处理边界、阴影和发光。

更新的RUZEE。ShadedBorder是另一个选项,但是它缺乏从CSS中获取样式信息的支持。

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

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

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

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