Nizza CSS Abzeichen - können Sie mir eine Hand geben?

Question

Ich möchte Abzeichen implementieren wie auf Stack-Überlauf. Vielleicht können Sie mir einige schöne CSS-Code geben?

Answer 1

Die Einführung der brandneuen

Stack-Überlauf 3000 Badgemaker

Es macht Abzeichen ™

Just in einem Namen Pop, ihm sagen, welche Farbe Sie Ihr glänzendes neues Abzeichen sein wollen, und Sie sind alle gesetzt!

^{Browser-Unterstützung: Alle modernen Browser, bis zu und einschließlich IE7. Runde Ecken nicht in IE8 und unten unterstützt.}

Answer 2

Vielleicht können Sie das schöne benutzen Firebug und werfen Sie einen Blick an, wie es so tut.

Answer 3

Sie meinen abgerundeten Ecken? Es nutzt CSS3 abgerundete Ecken:

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

Answer 4

Sie können auch eine Suche nach ‚badge‘ auf ihrer CSS-Datei ausführen:

.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;}