Warum erzeugt „border-radius' unterschiedliche Formen mit Prozentsätzen im Vergleich zu Pixeln/ems?

Border-Radius in Pixel (%) und Pixel (px) oder Em

Warum funktioniert Border-Radius Handeln Sie anders mit Prozentsätzen und Pixel?

Mit dem Randradius können Sie die Ecken Ihrer Webelemente abrunden. Bei Verwendung von Prozentsätzen oder Pixeln ändert sich jedoch die Form der Ecken.

Prozentwerte

Gemäß CSS Backgrounds and Borders Module Level 3 beziehen sich Prozentsätze auf die entsprechende Abmessung des Rahmenrahmens. Wenn Sie beispielsweise den Randradius auf 50 % festlegen, betragen die Radien auf der X-Achse 50 % der Breite des Containers und die Radien auf der Y-Achse 50 % der Höhe des Containers. Dies führt zu einer elliptischen Form.

Pixel- und andere Einheitenwerte

Verwendung eines einzelnen Pixelwerts oder einer anderen Einheit (z. B. em, in) für Rand- Radius erzeugt immer eine Ellipse, oder mit anderen Worten, einen Kreis.

Allerdings, wenn die Kurven Bei der Überlappung wird eine Regel angewendet, die die Radien auf die Hälfte der kleinsten Seite reduziert. Wenn Sie beispielsweise border-radius: 999px; Bei einem Element mit den Maßen 230 x 100 Pixel würden die Radien auf 50 Pixel reduziert, was der halben Höhe des Elements entspricht.

Beispiel

Bedenken Sie Folgendes Codeausschnitt:

.percent {
  border-radius: 50%;
}
.pixels {
  border-radius: 115px/50px;
}

/* For the demo : */
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;
  text-align: center;
}

Mit Randradius: 50 %; die Ecken haben eine elliptische Form. Mit border-radius: 115px/50px; haben die Ecken die gleiche elliptische Form, da 115px/50px 50 % beider Seiten eines Elements mit den Maßen 230px x 100px entspricht.

Das obige ist der detaillierte Inhalt vonWarum erzeugt „border-radius' unterschiedliche Formen mit Prozentsätzen im Vergleich zu Pixeln/ems?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!