Eine Frage zur Einstellung des Randradius-Werts

Problemdatensatz

Heute wollte ich ein kleines Bauteil fertigstellen, das einem Fortschrittsbalken ähnelt. Der Prototyp sieht so aus (hier ist er 200px lang und 28px hoch)

Als ich es sah, war es sehr einfach. Abgesehen vom Stil der Nummer 1 ist der übergeordnete Stil ein Div mit einem Halbkreis auf der linken und einem Bogen auf der rechten Seite.
Dies kann mithilfe des CSS-Randradius erfolgen. Die linke Seite hat abgerundete Ecken mit einem Radius von 50px. Die rechte Seite hat kleine abgerundete Ecken. In der Vergangenheit hatten alle Divs einen Radius von 8px. Entsprechend der Reihenfolge der Ecken im Rahmenradius (im Uhrzeigersinn analysiert, oben links, oben rechts, unten rechts, unten links), legen Sie den Rahmenradius fest: 50px 8px 8px 50px; und alles ist in Ordnung. Mit viel Freude schreibe ich den Style und öffne den Browser.

Ich bin dumm, das ist nicht richtig, ich dachte, es wäre so

Tatsächlich sieht der Browser so aus

Irgendetwas stimmt nicht. Der Winkel rechts wurde eingestellt, aber warum sieht es so aus, als wäre er überhaupt nicht eingestellt? Ich habe 8 auf 10 Pixel geändert und es erneut versucht, aber es sieht immer noch fast so aus, als wäre er überhaupt nicht eingestellt.

8px sollte eine merkliche Krümmung ergeben. Lassen Sie uns alles auf 8px einstellen und sehen.

Ja, das ist die Krümmung, die 8px haben sollte. Warum ändert sie sich, wenn sie links auf 50px geändert wird? Hängt das mit 50px zusammen? Voller Zweifel schaute ich mir Baidu an.

Baidu sagte, dass die vollständige Art und Weise, border-radius (w3c) zu schreiben, ist

Randradius: 1–4 Länge|% / 1–4 Länge|%;

Normalerweise schreiben wir border-radius: 50px, eigentlich sollte der komplette Text so lauten:

Rahmenradius: 50px 50px 50px 50px / 50px 50px 50px 50px 50px;

Die vier Werte vor dem „/“ stellen den horizontalen Radius der Rundung dar, und die folgenden vier Werte stellen den vertikalen Radius der Rundung dar.

Jede Reihenfolge entspricht (horizontaler Radius: oben links, oben rechts, unten rechts, unten links)/(vertikaler Radius: oben links, oben rechts, unten rechts, unten links),

Was sind der horizontale und der vertikale Radius?

Je nach Verhältnis des horizontalen Radius zum vertikalen Radius kann die Krümmung des Winkels angepasst werden. Wenn die Radien der beiden gleich sind, handelt es sich um eine abgerundete Ecke. Deshalb stelle ich die Ecken normalerweise so ein, dass sie abgerundet sind, da ich noch nie ein komplettes

Zum Beispiel border-radius:10px 20px 30px 40px/40px 30px 20px 10px

Es ist wie folgt

Lassen Sie uns auf unsere vorherige Frage zurückblicken.

Wir haben die Höhe von 28 Pixeln ignoriert. Wenn wir also die rechte Seite als Halbkreis festlegen möchten, wäre das dann nicht in Ordnung, solange der horizontale und vertikale Radius beide 14 Pixel betragen?

Rahmenradius: 14px 8px 8px 14px / 14px 8px 8px 14px; 

Auf diese Weise ist der übergeordnete Stil korrekt.

Die zuvor auf der rechten Seite eingestellten abgerundeten Ecken von 8 Pixeln scheinen keine Wirkung zu haben. Vielleicht ist es im Vergleich zu 50 Pixeln proportional komprimiert, da die linke Seite ursprünglich 28 Pixel hoch ist und ein Radius von 50 Pixeln eingefügt wird. Ich habe berechnet (14 * 8 / 50 = 2,24), was der Einstellung entspricht

Rahmenradius: 14px 2,24px 2,24px 14px / 14px 2,24px 2,24px 14px;

Seien Sie in Zukunft beim Schreiben von Stilen vorsichtig, kleine Probleme können zu großen werden.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.