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

124

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 :

Pixel (px) RandradiusProzent (%) Randradius

Pixelwert für Randradius:

Prozentwert für Randradius:

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

Web-Tiki
quelle

Antworten:

180

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

Der Randradius in Prozent (%) ergibt eine Ellipse

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.

Der Randradius in Pixel (px) ergibt eine Pillenform


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>

Web-Tiki
quelle
6
Hervorragende Antwort. Schade, dass die prozentualen Radiuswerte für Breite und Höhe getrennt berechnet werden. Dies bedeutet, dass ich keine kreisförmigen Ecken erhalten kann, die mit der Größe des Objekts skalieren, ohne das Seitenverhältnis des Objekts zu kennen. Wäre es nicht schön, wenn der Prozentsatz auf die größere der Objektdimensionen angewendet würde?
Chris Dennis
4
@ ChrisDennis Das stimmt nicht. Wie OP sagte, können Sie einfach verwenden border-radius: 999px;. Auf diese Weise erhalten Sie Ihre kreisförmigen Ecken und stellen sicher, dass sie mit Ihrem Element skalieren
Gust van de Wal
9
Aber ich möchte vielleicht keine halbkreisförmigen Enden der Box. Ich möchte in der Lage sein, den x-Radius als beispielsweise 10% der Breite der Box und den y-Radius gleich dem x-Radius anzugeben.
Chris Dennis
4
Hey, hast du einen anderen selbst beantworteten Beitrag wie diesen gemacht? Ich würde diese gerne lesen.
Ced
3
Aber was tatsächlich mit Prozentsatz funktioniert, ist: border-radius: 50%/100%(Getestet in Chrome 60 + 61)
Denns
6

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.

CyberJ
quelle
1
Ist das nicht nur 25% der Breite und 50% der Höhe? Das entspricht nicht 50% der Höhe in X- und Y-Richtung.
Mpen
Was zum Teufel ist diese Syntax! Es klappt! Ich wusste nie, dass es existiert, es ist schön!
Uri Kutner
Es ist nur Mathe Bruder
CyberJ
Ich weiß nicht, welche Art von Mathematik Sie gemacht haben, aber es ist nicht "nur Mathematik". Es ist eine speziell definierte Abkürzung für Randradius, die überhaupt nichts mit arithmetischer Division zu tun hat. w3.org/TR/css-backgrounds-3/#border-radius
MI Wright