Question

重复：

What is the best way to create rounded corners using CSS?

我想创建一个包含一些列的表，其中每列都有一个圆角。

我不是css专家。我认为js解决方案也应该没问题。

如果有人这样做了......如果他们能提供帮助，我将非常感激。

我没有使用Jquery。

感谢，本

Answer 1

以下是使用CSS执行此操作的25种不同方法的链接：

http://www.cssjuice.com/25-rounded-corners-techniques-with-css/

以下是使用javascript：

执行此操作的漂亮角落的链接

http://www.html.it/articoli/nifty/index.html

Answer 2

在safari中，chrome（我想象），firefox 2+和konquerer（可能还有其他人）你可以使用'border-radius'在CSS中完成它。由于它还不是规范的正式部分，请使用供应商特定的前缀

例如

#round-my-corners-please {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;

}

JS解决方案通常会添加一堆小div以使其看起来更圆，或者使用边框和负边距来制作1px缺角。

IMO，CSS方式更好，因为它看起来很酷，很容易，并且会在IE中优雅地降级。当然，这只是客户端不在IE中强制执行它们的情况。

Answer 3

这就是我在几个项目中所做的事情：

对于基于Firefox和WebKit的浏览器（虽然要注意Chrome在此区域存在错误），但要使用基于CSS边框半径的样式来处理原生圆角：

-webkit-border-radius: 20px;
-moz-border-radius: 20px;

这些也允许您指定每个角的值，只需注意语法略有不同：

-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;

这些基于CSS3 border-radius样式，有关此处不同定义的更多信息：CSS: border-radius and -moz-border-radiuss（请注意文章有点过时但仍然相关）。我没有研究过这个，但我不知道有任何浏览器实现原生的CSS3 border-radius（如果我错了，请告诉我）。

然后对于IE，我使用DD_roundies这是我见过的最优雅的JavaScript解决方案，并使用原生的IE VML来绘制角落。

如果用户使用没有JavaScript的IE或使用Opera，那么运气不好他们就不会有圆角，但本着渐进式增强的精神，这不应该是一个问题。

Answer 4

如果你想坚持使用CSS，最好的方法就是：

-webkit-border-radius: 20px;
-moz-border-radius: 20px;

但是，您疏远了Internet Explorer市场份额。

要解决这个问题，可以为div创建圆形图像。 http://www.roundedcornr.com/有一个图像生成器和示例代码。

javascript替代品将是一个像DD_Roundies这样的jQuery插件。使用DD_Roundies插件是迄今为止最简单的方法。 http://www.dillerdesign.com/experiment/DD_roundies/ 你只需告诉div你想要半径多大，在角落里，它会自己完成所有魔法（颜色，渐变）。

Answer 5

大多数时候我看到它涉及使用css进行巧妙的图像处理。表和其他此类小部件由浏览器定义，因此您不能只使用它们并保证每个人都能看到相同的内容。

http://designworkx.co.nz/

有一个简单的即将到来的页面，这是一个很好的简单例子。

Answer 6

HTML化妆标签，CSS和javascript是一种更灵活的方式。

此链接告诉算术生成任意半径的圆角css。 http://www.pagecolumn.com/webparts/rounded_corners.htm

如何使用Css或javascript创建圆角

重复：

6 个答案: