der perfekte Kreis in css mit border-radius funktioniert nicht

den Kreis neigen dazu, eine Ovale, was ich will, ist perfect circle. border-radius 100% nicht funktionieren ich Frage mich, warum..

http://jsfiddle.net/8gD2m/1/

.badge {
    display: inline-block;
    min-width: 10px;
    padding: 3px 7px;
    font-size: 12px;
    font-weight: lighter !important;
    line-height: 1;
    color: #fff !important;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    background-color: #d73d33;
    border-radius: 50px;
    position: relative;
    top: -3px;
}
Ich glaube, Sie brauchen, um die gleiche padding auf allen Seiten für diese zu arbeiten. Vielleicht möchten Sie auch versuchen, die Reduzierung Ihrer line-height. Dies wird wohl auch nur funktionieren, für die einstelligen zahlen. Die zusätzlichen Ziffern wird die Erhöhung der notwendigen Breite, aber die Höhe bleibt die gleiche.

InformationsquelleAutor user3277912 | 2014-02-12

  1. 0

    check this out

    .badge {
    display: inline-block;
    min-width: 10px;
    padding: 7px;
    font-size: 12px;
    font-weight: lighter !important;
    line-height: 1;
    color: #fff !important;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    background-color: #d73d33;
    border-radius: 50px;
    position: relative;
    top: -3px;
}

    InformationsquelleAutor Ansyori

  2. 0

    wenn es nicht perfect circle check display: inline-block und border-radius: 50%:

     .cirlce {
    height: 20px;
    width: 20px;
    padding: 5px;
    text-align: center; 
    border-radius: 50%;
    display: inline-block;
    color:#fff;
    font-size:1.1em;
    font-weight:600;
    background-color: rgba(0,0,0,0.1);
    border: 1px solid rgba(0,0,0,0.2);
    }

    InformationsquelleAutor Nalan Madheswaran

  3. 0

    Ich hatte das gleiche Problem. Wenn ich fügte hinzu, ein 100% border-radius, mein Bild verwandelte sich in ein oval. Das ist, weil mein Bild ist breiter als hoch. Stellen Sie sich das glätten der Kanten eines Rechtecks. Wenn Sie möchten, dass Ihr Bild kreisförmig sein, Sie müssen sicherstellen, dass die Abmessungen (Höhe und Breite sind die gleichen. Sie könnten versuchen, Einstellung, indem Sie das folgende:

    css height: 200px; width: 200px; (der Punkt ist also, die gleiche Höhe und mit in Ihre CSS)

    Dadurch wird sichergestellt, dass Ihr Bild kreisförmig ist, aber es kann bewirken, dass Ihr Bild gestreckt und verzerrt, weil Sie Ihre ursprünglich Bild ist NICHT ein perfekter Platz, die ich vermute.

    InformationsquelleAutor Onesmus.A

Schreibe einen Kommentar