Javascript：如何创建圆角选项卡菜单？答案

【问题标题】：Javascript: How to create a rounded corner tab menu?Javascript：如何创建圆角选项卡菜单？
【发布时间】：2010-11-18 04:23:48
【问题描述】：

你知道我可以下载任何像这样的圆角标签吗？或者我怎样才能创建这样的标签？是否需要在选项卡菜单中使用图像？我用的是：

-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius:5px;
border-top-right-radius:5px;

但这并不完美。你知道任何关于圆角标签的有用链接/教程吗？

【问题讨论】：

【解决方案1】：

最好看的圆角总是使用图像完成的。其他任何东西都是浏览器的最佳尝试，这可能不是您想要的。仅使用图像也容易得多。

您只需要为每个角使用一个小图像，并为其余的边框设置另一组可平铺的图像。将其全部插入 CSS 类中，一切顺利。

【讨论】：

感谢您的建议，马修。我曾尝试找到易于定制的圆角 JS 选项卡，但我找不到。我将只创建我自己的圆形选项卡和我自己的 JS 选项卡的图像。我在想标签菜单的背景将是一个应用了滑动门技术的图像，这样一个非常大的文本将被图像背景覆盖。

【解决方案2】：

并非所有浏览器都支持，但您可以使用 CSS3 轻松显示圆角，而无需图像或 javascript：

<div style="-moz-border-radius: 5px; -webkit-border-radius: 5px;">
    Rounded corners!
</div>

这应该允许在旧浏览器中正常降级（只是不会显示为圆形），但如果您想确保所有用户都拥有相同的体验，我仍然倾向于使用图像。

【讨论】：

【解决方案3】：

为什么不使用 jQuery UI？他们有漂亮的圆形标签。见http://jqueryui.com/themeroller/#themeGallery

【讨论】：