Randradius in Prozent (%) und Pixel (px) oder em

Wenn ich einen Pixel- oder em-Wert für den Randradius verwende, ist der Kantenradius immer ein Kreisbogen oder eine Pillenform, auch wenn der Wert größer als die größte Seite des Elements ist.

Wenn ich Prozentsätze verwende , ist der Kantenradius elliptisch und beginnt in der Mitte jeder Seite des Elements, was zu einer ovalen oder Ellipsenform führt :

Pixelwert für Randradius:

div {
   background: teal;
   border-radius: 999px;
   width: 230px;
   height: 100px;
   padding: 40px 10px;
   box-sizing: border-box;
   font-family: courier;
   color: #fff;
 }

<div>border-radius:999px;</div>

Prozentwert für Randradius:

div {
  background: teal;
  border-radius: 50%;
  width: 230px;
  height: 100px;
  padding:40px 10px;
  box-sizing:border-box;
  font-family:courier;
  color:#fff;
}

<div>border-radius:50%;</div>

Warum verhält sich der Randradius in Prozent nicht so wie der mit Pixel- oder Em-Werten festgelegte Randradius?

Randradius:

Zunächst müssen Sie verstehen, dass die Eigenschaft border-radius zwei Werte annimmt. Diese Werte sind die Radien auf der X / Y-Achse einer Viertelellipse, die die Form der Ecke definieren.
Wenn nur einer der Werte eingestellt ist, ist der zweite Wert gleich dem ersten. Ist border-radius: xalso gleichbedeutend mit border-radius:x/x;.

Prozentwerte

In Bezug auf die W3C-Spezifikationen: CSS-Hintergrund- und Rahmenmodul Level 3-Eigenschaft für den Randradius können wir Folgendes in Bezug auf Prozentwerte lesen:

Prozentsätze: Siehe entsprechende Abmessung des Rahmenrahmens.

border-radius:50%;Definiert also den Raddi der Ellipse folgendermaßen:

• die Radien auf der X - Achse betragen 50% des Behälters Breite
• die Radien auf der Y - Achse beträgt 50% der Behälter Höhe

Pixel und andere Einheiten

Die Verwendung eines anderen Werts als eines Prozentsatzes für den Rahmenradius (em, in, auf Ansichtsfenster bezogene Einheiten, cm ...) führt immer zu einer Ellipse mit denselben X / Y-Radien. Mit anderen Worten, ein Kreis .

Wenn Sie einstellen, sollten border-radius:999px;die Radien des Kreises 999px betragen. Eine andere Regel wird angewendet, wenn sich die Kurven überlappen und die Radien des Kreises auf die Hälfte der kleinsten Seite reduzieren. In Ihrem Beispiel entspricht es also der halben Höhe des Elements: 50px.

In diesem Beispiel (mit einem Element fester Größe) können Sie mit px und Prozentsätzen das gleiche Ergebnis erzielen. Wie das Element ist 230px x 100px, border-radius: 50%;entspricht border-radius:115px/50px;(50% von beiden Seiten):

div {
  display: inline-block;
  background: teal;
  width: 230px;
  height: 100px;
  padding: 40px 10px;
  box-sizing: border-box;
  font-family: courier;
  font-size: 0.8em;
  color: #fff;
}
.percent {
  border-radius: 50%;
}
.pixels {
  border-radius: 115px/50px;
}

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

Teilen Sie einfach den ersten Wert durch das gewünschte%. Wenn Sie also einen Randradius von 50% möchten, schreiben Sie:

border-radius: 25%/50%; 

oder ein anderes Beispiel:

border-radius: 15%/30%;

Sie können leicht in js oder SASS rechnen.