使用CSS创建圆角
我如何使用CSS创建圆角？
自引入CSS3以来，使用CSS添加圆角的最佳方法是使用border-radius属性。 您可以阅读该属性的规范，或者在MDN上获取一些有用的实现信息：
如果您使用的浏览器没有实现border-radius （Chrome pre-v4，Firefox pre-v4，IE8，Opera pre-v10.5，Safari pre-v5），那么以下链接会详细介绍一大堆不同的方法。 找到一个适合您的网站和编码风格的网站，并与之配合。
在Stack Overflow的创建过程中，我很早就注意到了这一点，并且找不到任何创建圆角的方法，这些方法并没有让我觉得我只是走过了下水道。
CSS3确实最终定义了
border-radius:
这正是你想要它工作的方式。 虽然这在最新版本的Safari和Firefox中运行良好，但在IE7（而我不认为在IE8中）或Opera中都没有。
与此同时，它一路下跌。 我有兴趣听到其他人认为目前在IE7，FF2 / 3，Safari3和Opera 9.5上执行此操作最简洁的方法..
如果浏览器不支持，他们会看到带有平角的内容。 如果圆角对您的网站来说不是那么重要，那么您可以在下面使用这些代码行。
如果你想使用相同半径的所有角落，这是简单的方法：
.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上运行得非常好。
链接地址: http://www.djcxy.com/p/31413.html