Pixel vs. Prozentsatz im CSS „border-radius': Wie unterscheiden sie sich?

Randradius: Pixel oder Prozentsatz?

Wenn Sie CSS zum Definieren des Randradius eines Elements verwenden, fällt Ihnen das möglicherweise auf Die resultierende Form unterscheidet sich je nachdem, ob Sie einen Pixel- oder Prozentwert verwenden. In diesem Artikel gehen wir näher darauf ein, warum dies geschieht, und untersuchen die Auswirkungen auf Ihre Designs.

Border-radius Property

The border- Die Radiuseigenschaft gibt die Kurven an den Ecken eines Elements an. Es akzeptiert zwei Werte, die die Radien auf der In den W3C-Spezifikationen beziehen sich Prozentwerte für den Randradius auf die Breite und Höhe des Rands des Elements box.

Beispiel: border-radius: 50 %; definiert die Radien wie folgt:

• 
  X-Achsen-Radius:
  50 % der Containerbreite
< ;li>Y-Achsen-Radius:
50 % von die Höhe des Behälters

Dies führt zu einer elliptischen Form mit gleichen Radien auf beiden Achsen.

Pixel und andere Einheiten

Verwendung einer anderen Einheit als eines Prozentsatzes (z. B. Pixel, em, Ansichtsfenstereinheiten) erzeugen eine Ellipse mit gleichen Radien, wodurch effektiv ein Kreis entsteht.

Wenn der resultierende Kreis jedoch den Rand des Elements überlappt, gilt eine andere Regel angewandt. Die Radien werden auf die Hälfte der kleinsten Seite des Elements reduziert. Dadurch wird sichergestellt, dass die Kurven nicht über die Grenzen des Elements hinausragen.

In Ihrem Beispiel:

 Hintergrund: blaugrün;<p> Rahmenradius: 999px;<br> Breite: 230px;<br> Höhe: 100px;<br> ...<br>}

<br></div><p><p>Der Randradius: 999px; würde einen Kreis ergeben. Da der Kreis jedoch die Höhe des Elements überlappt, werden die Radien auf 50 Pixel, also die Hälfte der Höhe, angepasst.</p><br><p>Für dieses Element können Sie mit Pixeln und Prozentsätzen das gleiche Ergebnis erzielen. da 50 % sowohl der Breite als auch der Höhe entsprechen 115px/50px:</p></p>
<p><div><div class="snippet-code"><br><pre class="brush:php;toolbar:false"> border-radius: 50%;<br>}<br>.pixels {<br> border-radius: 115px/50px;<br>}<br>/<em> ... </em>/

<div class="pixels">border-radius: 115px/50px;</div>