我如何使用CSS创建圆角?
当前回答
自从引入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+图像的流畅圆角技术的文章:
使用CSS和图像的圆角盒子-第2部分
这个技巧的概述是使用嵌套的div和背景图像重复和定位。对于固定宽度的布局(固定宽度可拉伸的高度),你需要三个div和三张图片。对于流体宽度布局(可拉伸宽度和高度),您需要9个div和9张图像。有些人可能会认为这太复杂了,但恕我直言,这是有史以来最简洁的解决方案。没有黑客,没有JavaScript。
jQuery是我个人处理这个问题的方法。css的支持是最低限度的,图像太精细,能够选择你想在jQuery圆角的元素对我来说是完美的,即使有些人会毫无疑问地反对。这里有一个我最近在工作项目中使用的插件:http://web.archive.org/web/20111120191231/http://plugins.jquery.com:80/project/jquery-roundcorners-canvas
我建议使用背景图片。其他方法就没有这么好了:没有抗锯齿和无意义的标记。这不是使用JavaScript的地方。
我通常得到圆角只是与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上都能很好地工作。
正如Brajeshwar所说:使用border-radius css3选择器。现在,您可以分别为基于Mozilla和Webkit的浏览器应用-moz-border-radius和-webkit-border-radius。
那么,ie浏览器会发生什么呢?微软有许多行为使ie浏览器有一些额外的功能,并获得更多的技能。
这里:一个.htc行为文件,用于从CSS中的border-radius值获取圆角。为例。
div.box {
background-color: yellow;
border: 1px solid red;
border-radius: 5px;
behavior: url(corners.htc);
}
当然,行为选择器不是一个有效的选择器,但你可以把它放在一个不同的css文件与条件注释(仅适用于IE)。
行为HTC文件