漂亮的 CSS 徽章 - 你能帮我一把吗？答案

【问题标题】：Nice CSS badge - can you give me a hand?漂亮的 CSS 徽章 - 你能帮我一把吗？
【发布时间】：2011-04-14 18:47:50
【问题描述】：

我想在 StackOverflow 上实现徽章。也许你可以给我一些漂亮的 CSS 代码？

【问题讨论】：

请澄清什么是SO？提前致谢
漂亮的 CSS 徽章？你不需要臭的 Nice CSS 徽章。

标签： css badge

【解决方案1】：

介绍全新的

Stack Overflow BadgeMaker 3000

制作徽章™

只需输入一个名称，告诉它您希望闪亮的新徽章是什么颜色，一切就绪！

^{浏览器支持：所有现代浏览器，包括 IE7。 IE8 及更低版本不支持圆角。}

【讨论】：

nm，它是在回发时完成的，去看看
发现这是我一天中最好的部分！

【解决方案2】：

或者您可以在他们的 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;}

【讨论】：

【解决方案3】：

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

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

【讨论】：

我等不及有人指出使用 Firebug 实际上不会产生所有这些，因为任何 Firefox 不支持的东西都会在其视图中被忽略。不过，它确实有一个原始请求查看器...

【解决方案4】：

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

【讨论】：

@John：感谢您的精彩评论。
不确定是因为不必要的讽刺而给你 -1 还是因为让我傻笑而给你 +1。 :p 我认为只会将其保留为 0。 :)
人们对彼此如此友好真是太好了。
我刚刚获得了此答案的“好答案”徽章！耶！
谢谢你，我不想复制徽章的所有 css，我想要一些不同的东西。恭喜您获得“不错的答案”徽章，希望您会喜欢。