不錯的CSS徽章 - 你能幫我一把嗎？

我想實現徽章，如堆棧溢出。也許你可以給我一些不錯的CSS代碼？不錯的CSS徽章 - 你能幫我一把嗎？

來源

2010-09-20 good_evening

請澄清一下SO是什麼？在此先感謝 – 2010-09-20 16:28:40

SO =堆棧溢出 – Evert 2010-09-20 16:29:52

+10

漂亮的CSS徽章？你不需要不漂亮的CSS徽章。 – 2010-09-20 16:35:10

引入全新

Stack Overflow BadgeMaker 3000

它使徽章™

只需在名稱中彈出，告訴它什麼你想要你的閃亮新徽章的顏色，並且你全都準備好了！

^{瀏覽器支持：所有現代瀏覽器，直至幷包括IE7。 IE8及以下版本不支持圓角。}

來源

2010-09-20 16:47:25

ROFL，這太棒了。 – BoltClock 2010-09-26 08:02:57

大聲笑，但它不適用於meeeeeee – jcolebrand 2010-11-29 01:57:08

nm，它在回發上，去圖 – jcolebrand 2010-11-29 01:57:26

也許你可以使用漂亮的Firebug，並看看它是如何做到的。

來源

2010-09-20 16:27:00

非常好的答案。 – John 2010-09-20 16:27:57

@John：謝謝你的評論。 – 2010-09-20 16:28:32

不確定是否-1爲你不必要的諷刺或+1你讓我咯咯地笑。：p會把它留在0我想。 :) – 2010-09-20 16:28:32

你的意思是圓角？它使用CSS3圓角：

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

來源

2010-09-20 16:29:59 gertas

我不能等到有人指出使用Firebug實際上不會產生所有這些，因爲Firefox不支持的任何內容在其視圖中都會被忽略。那麼，它確實有一個原始的請求查看器，雖然... – 2010-09-20 16:32:43

或者你可以運行自己的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;}

來源

2010-09-20 16:30:42 animuson

不錯的CSS徽章 - 你能幫我一把嗎？

回答

Stack Overflow BadgeMaker 3000

它使徽章™

相關問題