Warum verhält sich „border-radius' bei Pixeln und Prozentsätzen unterschiedlich?

Randradius-Diskrepanz

Das Verhalten der Randradius-Eigenschaft unterscheidet sich je nachdem, ob Pixel- oder Prozentwerte verwendet werden.

Pixel und EM Werte

Bei Verwendung von Pixel- oder EM-Werten erzeugt der Rahmenradius einen Kreisbogen oder eine Pillenform. Dies liegt daran, dass nur ein Wert angegeben wird, sodass der horizontale und der vertikale Radius gleich sind. Wenn der angegebene Wert die Größe des Elements überschreitet, werden die Radien auf die Hälfte der Größe der kleinsten Seite reduziert.

Prozentwerte

Im Gegensatz dazu, wenn Werden Prozentwerte verwendet, erzeugt der Randradius eine Oval- oder Ellipsenform. Dies liegt daran, dass sich der Prozentsatz auf die entsprechende Abmessung des Rahmenrahmens bezieht. Beispielsweise legt border-radius: 50 % den horizontalen Radius auf 50 % der Elementbreite und den vertikalen Radius auf 50 % der Elementhöhe fest.

Um eine Kreisform mit Prozentwerten zu erreichen, müssen zwei Werte angegeben werden angegeben werden, die den horizontalen und vertikalen Radius darstellen. Beispielsweise erstellt border-radius: 50 %/25 % einen Kreis mit einem horizontalen Radius von 50 % der Elementbreite und einem vertikalen Radius von 25 % der Elementhöhe.

Dieser Unterschied ergibt sich aus dem W3C Spezifikationen, die besagen, dass Prozentwerte für den Randradius sich auf die entsprechende Abmessung des Randfelds beziehen.

Das obige ist der detaillierte Inhalt vonWarum verhält sich „border-radius' bei Pixeln und Prozentsätzen unterschiedlich?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!