我如何使用CSS创建圆角?
当前回答
在Safari, Chrome, Firefox > 2, IE > 8和Konquerer(可能还有其他)中,你可以在CSS中使用border-radius属性。由于它还不是规范的正式部分,请使用特定于供应商的前缀…
例子
#round-my-corners-please {
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
JavaScript解决方案通常会添加一堆小的div来使它看起来圆角,或者使用边框和负边距来制作1px的缺口角。有些还可能在IE中使用SVG。
在我看来,CSS的方式更好,因为它很简单,并且在不支持它的浏览器中会优雅地降级。当然,这只是客户端在不受支持的浏览器(如IE < 9)中不强制执行它们的情况。
其他回答
当然,如果它是一个固定的宽度,它是超级容易使用CSS,而不是在所有冒犯或费力。当你需要向两个方向扩展时,情况就会变得不稳定。有些解决方案将大量的divs堆叠在一起以实现这一目标。
我的解决方案是告诉设计师,如果他们想使用圆角(暂时),它需要一个固定的宽度。设计师喜欢圆角(我也是),所以我觉得这是一个合理的妥协。
要让圆角发挥作用是多么复杂,甚至雅虎都不鼓励他们(见第一个项目符号)!当然,他们在那篇文章中只谈论了1像素的圆角,但有趣的是,即使是一家拥有他们专业知识的公司也得出结论,让他们大部分时间工作太痛苦了。
如果你的设计可以在没有它们的情况下存活,这就是最简单的解决方案。
我通常得到圆角只是与css,如果浏览器不支持他们看到的内容与平角。如果圆角对你的网站不是很重要,你可以使用下面的线条。
如果你想使用相同半径的所有角,这是一个简单的方法:
.my_rounded_corners{
-webkit-border-radius: 5px;
border-radius: 5px;
}
但如果你想控制每一个角落,这是很好的:
.my_rounded_corners{
border: 1px solid #ccc;
/* each value for each corner clockwise starting from top left */
-webkit-border-radius: 10px 3px 0 20px;
border-radius: 10px 3px 0 20px;
}
正如你所看到的,在每一组中,你都有特定于浏览器的样式,在第四行中,我们以标准的方式声明,我们假设在未来,如果其他人(希望也是IE)决定实现这个功能,让我们的样式也为他们做好准备。
正如在其他回答中所说,这在Firefox, Safari, Camino, Chrome上都能很好地工作。
Opera目前还不支持border-radius(显然在版本10之后才会支持)。同时,您可以使用CSS设置SVG背景来创建类似的效果。
没有“最好”的方法;有适合你的方法也有不适合你的方法。话虽如此,我在这里发布了一篇关于创建CSS+图像的流畅圆角技术的文章:
使用CSS和图像的圆角盒子-第2部分
这个技巧的概述是使用嵌套的div和背景图像重复和定位。对于固定宽度的布局(固定宽度可拉伸的高度),你需要三个div和三张图片。对于流体宽度布局(可拉伸宽度和高度),您需要9个div和9张图像。有些人可能会认为这太复杂了,但恕我直言,这是有史以来最简洁的解决方案。没有黑客,没有JavaScript。