Javascript:如何创建圆角标签菜单?

时间:2009-08-10 02:38:49

标签: javascript rounded-corners

alt text

嗨,大家好,你知道我可以下载的任何圆角标签吗?或者我该如何创建这样的标签?是否需要在标签菜单中使用图像?我使用了:

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

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

提前致谢:)

干杯, 标记

3 个答案:

答案 0 :(得分:3)

最好看的圆角始终是使用图像完成的。其他任何东西都是浏览器的最佳尝试,可能不是你想要的。使用图像也更容易。

您只需要为每个角落添加一个小图像,并为边框的其余部分添加另一个可平铺的图像。将它全部插入到CSS类中,你就可以了。

答案 1 :(得分:1)

尚未受到所有浏览器的支持,但您可以使用CSS3轻松显示圆角而无需图片或javascript:

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

更多信息:http://www.css3.info/preview/rounded-border

这应该允许旧浏览器中的优雅降级(只是不会显示为四舍五入),但如果您想确保所有用户都具有相同的体验,我仍然倾向于使用图像。

答案 2 :(得分:1)

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