如何使用CSS或JavaScript创建圆角

Question

重复：

使用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

在野生动物园，chrome（我想像），firefox 2+和konquerer（可能还有其他）中，您可以在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和-moz-border-radiuss （请注意，该文章有些陈旧 ，但仍然适用）。 我还没有对此进行研究，但是我不知道有任何实现本机CSS3边界半径的浏览器（如果我输入错了，请给我指正）。

然后对于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