CSS - Abgerundete Grenze sieht zu pixelig aus

Question

Ich brauche etwas Hilfe, um meine abgerundete Grenze zu beheben. Es sieht so hässlich aus. Ich möchte es flüssiger haben, aber ich kann es anscheinend nicht reparieren, egal was passiert. Ich weiß nicht, was ich falsch mache.

ist hier ein Bild davon:

Hier ist mein HTML:

<div class="sidebar"> 
    <!-- User avatar/message/notification/settings buttons --> 
    <div class="userpanel"> 
     <div class="userpanel-image"> 
      <img src="image.jpg"> 
     </div> 
     <div class="userpanel-buttons"> 
      <ul> 
       <li><a href="#"><span class="glyphicon glyphicon-envelope"></span></a></li> 
       <li><a href="#"><span class="glyphicon glyphicon-bell"></span></a></li> 
       <li><a href="#"><span class="glyphicon glyphicon-cog"></span></a></li> 
      </ul> 
     </div> 
    </div> 
</div> 

Und hier ist mein CSS:

.sidebar > .userpanel > .userpanel-image img { 
    border: 1px solid white; 
    border-radius: 25px; 
    margin: 3px; 
    margin-right: 25px; 
} 

Answer 1

Sie sind definitiv nicht etwas falsch machen.

Vielleicht nur weil die Grenze zu dünn ist. Versuchen Sie, border: 1px solid white; zu 2px, 3px oder was auch immer Sie möchten zu ändern. Gib es versuchen.

Answer 2

Leider hatte ich das gleiche Problem mehrmals. Ich denke, das könnte ein Renderproblem sein, das nicht zu 100% gelöst werden kann. Vielleicht können Sie die Abhilfe, die ich für mein „border-Problem“ verwendet, um es schärfer aussehen (ich es nicht auf jeden einzelnen Browser testen haben so u, dass Besuche haben könnte)

body {background:black;} 
 

 
div { 
 
    width:100px; 
 
    height:100px; 
 
    display:block; 
 
    background:#fff; 
 
    border-radius:100%; 
 
    padding:2px; 
 
} 
 

 
img { 
 
    display:block; 
 
    border-radius:100%; 
 
    display:block; 
 
    width:100px; 
 
    height:100px; 
 
}

<div> 
 
    <img src="https://unsplash.it/100" alt=""> 
 
</div>

Answer 3

Dies hängt letztlich von der pixel density des Monitors, den Sie verwenden.

Pixel pro Zoll (ppi) oder Pixel pro Zentimeter (PPCM) ist eine Messung der Pixeldichte (Auflösung) eine elektronischen Bildvorrichtung, wie beispielsweise einen Computermonitor oder Fernsehanzeige oder Bildgerät Digitalisierungs wie eine Kamera oder ein Bildscanner. Horizontale und vertikale Dichte sind in der Regel gleich, da die meisten Geräte quadratische Pixel haben, sich aber auf Geräten mit nicht quadratischen Pixeln unterscheiden.

Zum Beispiel wird eine 15 Zoll (38 cm) Anzeige, der Abmessungen ausrechnen bis 12 Zoll (30,48 cm) Breite und 9 Zoll (22,86 cm) hoch ist, kann maximal 1024 × 768 (oder XGA) Bildpunkt-Auflösung, kann sowohl in horizontaler als auch in vertikaler Richtung etwa 85 PPI anzeigen. Diese Zahl wird ermittelt, indem die Breite (oder Höhe) des Anzeigebereichs in Pixel durch die Breite (oder Höhe) des Anzeigebereichs in Zoll geteilt wird. Es ist möglich, dass ein Display verschiedene horizontale und vertikale PPI-Messungen aufweist (z. B. ein typischer 4: 3-CRT-Monitor, der eine 1280 × 1024-Modus-Computeranzeige bei maximaler Größe zeigt, was ein 5: 4-Verhältnis ist, nicht ganz dasselbe wie 4: 3). Der scheinbare PPI eines Monitors hängt von der Bildschirmauflösung (dh der Anzahl der Pixel) und der Größe des verwendeten Bildschirms ab. Ein Monitor im 800 × 600-Modus hat einen niedrigeren PPI als derselbe Monitor im Modus 1024 × 768 oder 1280 × 960.

Monitore mit einer höheren Pixeldichte neigen dazu, Kurven visuell besser zu glätten.

Es gibt wirklich nichts, was Sie allgemein wegen der Verbesserung der Pixeldichte-Anzeige über HTML/CSS oder wirklich alles können. Sie müssen lediglich lernen, mit der Qualität Ihres Monitors zu leben oder ihn zu verbessern.

In einigen Fällen kann die Anwendung einer leichten 1px,die gleiche Farbe wie Ihr Kreis bei der Monitor-Anti-Aliasing unterstützen. Das ist aber auch nicht 100% erfolgreich.

Answer 4

Normalerweise, wenn ich mit diesem Problem konfrontiert bin, reduziere ich nur den Kontrast der Farben, um das pixelige Anti-Aliasing zu erleichtern (wie ich in meinem Kommentar erwähnte). Dies ist jedoch nicht immer eine Option. Das eigentliche Problem, dem Sie gegenüberstehen, ist, dass der Browser eine gewisse Menge an Anti-Aliasing anwendet, um vollständige Zackigkeit zu verhindern, und Sie haben nicht wirklich die Kontrolle über die Intensität des angewendeten Anti-Aliasing. Hier ist eine Alternative, mit der Sie die Darstellung steuern können. Sie können box-shadow verwenden, um Ihre bestehende Grenze zu ergänzen oder ersetzen:

body { 
 
    background: #223; 
 
    padding-bottom: 25px; 
 
    text-align: center; 
 
    color: white; 
 
} 
 

 
div { 
 
    margin-top: 25px; 
 
} 
 

 
img { 
 
    display:inline-block; 
 
    
 
    border-radius: 50%; 
 
    border: 1px solid white; 
 
    vertical-align: middle; 
 
} 
 

 
div + div img { 
 
    box-shadow: 0 0 1px 0 white; 
 
} 
 

 
div + div + div img { 
 
    box-shadow: 0 0 0 1px white; 
 
    border: none; 
 
}

<div>border only: <img src="//placehold.it/50/933/FFF"></div> 
 
<div>border + box-shadow: <img src="//placehold.it/50/933/FFF"> 
 
<div>box-shadow only: <img src="//placehold.it/50/933/FFF">

Answer 5

Für mich dieser sieht am besten:

.userpanel-image { 
 
    width: 100px; 
 
    height: 100px; 
 
    border-radius: 100%; 
 
    box-shadow: 0 0 1px 1px white; 
 
    overflow: hidden; 
 
} 
 

 
.userpanel-image img { 
 
    width: 98px; 
 
    height: 98px; 
 
}