【发布时间】：2010-10-23 19:40:20
【问题描述】：
复制：
我想创建一个包含一些列的表格，其中每列都有一个圆角。
我不是 CSS 专家。我觉得js解决方案也应该没问题。
如果有人做过。如果他们能提供帮助，我将不胜感激。
我没有使用 Jquery。
谢谢， 本
【问题讨论】：
标签： javascript css
【发布时间】：2010-10-23 19:40:20
【问题描述】：
这里有 25 种使用 CSS 的不同方法的链接：
http://www.cssjuice.com/25-rounded-corners-techniques-with-css/
这里是一个漂亮的角落的链接，可以用 javascript 做到这一点：
【讨论】：
-
上面重复帖子的链接有一些非常好的额外资源。
-
两个链接都失效了
大多数时候我看到它涉及使用 css 进行巧妙的图像处理。表格和其他此类小部件由浏览器定义，因此您不能只使用它们并保证每个人都能看到相同的东西。
有一个简单的即将推出的页面，这是一个很好的简单示例。
【讨论】：
在 safari、chrome（我想）、firefox 2+ 和 konquerer（可能还有其他）中，您可以在 CSS 中使用“border-radius”来实现。由于它还不是规范的正式部分，请使用供应商特定的前缀
例子
#round-my-corners-please {
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
}
JS 解决方案通常会添加一堆小 div 使其看起来圆润，或者使用边框和负边距来制作 1px 的凹角。
IMO，CSS 方式更好，因为它看起来很酷，很简单，并且会在 IE 中优雅地降级。当然，这只是客户端不在 IE 中强制执行它们的情况。
【讨论】：
HTML 化妆标签，CSS 和 javascript 是一种更灵活的方式。
此链接告诉算法生成任意半径的圆角 css。 http://www.pagecolumn.com/webparts/rounded_corners.htm
【讨论】：
这是我在几个项目中所做的：
对于基于 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 边框半径（如果我错了，请纠正我）。
然后对于 IE，我使用 DD_roundies，这是我见过的最优雅的 JavaScript 解决方案，并使用原生 IE VML 来绘制角。
如果用户有没有 JavaScript 的 IE 或使用 Opera，那么运气不好，他们不会得到圆角，但本着渐进增强的精神，这应该不是问题。
【讨论】：
如果你想坚持 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 您希望半径有多大以及在哪些角上，它会自行完成所有魔法（颜色、渐变）。
【讨论】：