漂亮的 CSS 徽章 - 你能帮我一下吗？

Question

我想像 Stack Overflow 上那样实现徽章。也许你能给我一些漂亮的 CSS 代码？

Answer 1

隆重推出全新的

Stack Overflow BadgeMaker 3000

它让 Badges™

轻松出现一个名称，告诉它您想要闪亮的新徽章是什么颜色，然后一切就完成了！

^{浏览器支持：所有现代浏览器，直至并包括 IE7。 IE8 及以下版本不支持圆角。}

Answer 2

也许你可以使用漂亮的 Firebug 并看看它是如何做到的。

Answer 3

你是说圆角吗？它使用 CSS3 圆角：

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

Answer 4

或者您可以在其 CSS 文件上搜索“徽章”：

.badge,.badge-tag{color:#fff!important;background-color:#333;border:1px solid #333;margin:0 3px 3px 0;padding:0 6px 0 3px;display:inline-block;text-decoration:none;line-height:1.9;-moz-border-radius:6px;-webkit-border-radius:6px;}
.badge:hover,.badge-tag:hover{border:1px solid #555;background-color:#555;text-decoration:none;}
.badge-tag:hover{color:#fff!important;border:2px solid #555;}
.badge-tag{color:#333!important;border:2px solid #333;background-color:#eee;}