我如何使用CSS创建圆角?


当前回答

要让圆角发挥作用是多么复杂,甚至雅虎都不鼓励他们(见第一个项目符号)!当然,他们在那篇文章中只谈论了1像素的圆角,但有趣的是,即使是一家拥有他们专业知识的公司也得出结论,让他们大部分时间工作太痛苦了。

如果你的设计可以在没有它们的情况下存活,这就是最简单的解决方案。

其他回答

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

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

当然,如果它是一个固定的宽度,它是超级容易使用CSS,而不是在所有冒犯或费力。当你需要向两个方向扩展时,情况就会变得不稳定。有些解决方案将大量的divs堆叠在一起以实现这一目标。

我的解决方案是告诉设计师,如果他们想使用圆角(暂时),它需要一个固定的宽度。设计师喜欢圆角(我也是),所以我觉得这是一个合理的妥协。

自从引入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

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

CSS3最终定义了

border-radius:

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

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

我通常得到圆角只是与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上都能很好地工作。