Obwohl der Randradiusbetrag der folgenden 2 Felder gleich ist, zeigt er unterschiedliche Ergebnisse. Was ist der Grund dafür? Und wie können wir einstellen, dass es in jeder Box gleich aussieht. Müssen wir mathematische Operationen entsprechend der Größe der Box durchführen? (Ich spreche davon, warum Box 2 weniger rund ist.)
Ich weiß, dass es eine optische Täuschung ist, aber ich möchte, dass es angesichts der Größe der Schachtel gleich aussieht.
* {
margin: 1rem;
}
.box {
width: 10rem;
height: 5rem;
background-color: black;
border-radius: 3rem;
}
.box2 {
width: 20rem;
height: 10rem;
background-color: black;
border-radius: 3rem;
}<div class="box"></div>
<div class="box2"></div>Der Randradius wird gezackt, wenn ich es mit Prozentwerten mache.
* {
margin: 1rem;
}
.box {
width: 10rem;
height: 5rem;
background-color: black;
border-radius: 20%;
}
.box2 {
width: 20rem;
height: 10rem;
background-color: black;
border-radius: 20%;
}<div class="box"></div>
<div class="box2"></div>Sie können die border-radiusin % definieren .
* {
margin: 1rem;
}
.box {
width: 10rem;
height: 5rem;
background-color: black;
border-radius: 15%/30%;
}
.box2 {
width: 20rem;
height: 10rem;
background-color: black;
border-radius: 15%/30%;
}<div class="box"></div>
<div class="box2"></div>Dieser Artikel stammt aus dem Internet. Bitte geben Sie beim Nachdruck die Quelle an.
Bei Verstößen wenden Sie sich bitte [email protected] Löschen.
Lass mich ein paar Worte sagen