CSS: interessante Merkmale des Randradius

Was kann mit der Eigenschaft CSS border-radius getan werden? Der Autor des Materials, dessen Übersetzung wir veröffentlichen, sagt, dass mehr als es auf den ersten Blick scheint. Insbesondere sprechen wir über die Tatsache, dass die Ecken von Elementen, die durch diese Eigenschaft abgerundet werden, eine sehr interessante Form haben können.


Wir empfehlen, über die Feinheiten der Verwendung des Randradius zu sprechen.

Alte Immobilien und modernes Webdesign

In diesem Jahr hielt Rachel Andrew auf der Frontend-Konferenz in Zürich einen Vortrag über die Möglichkeiten der CSS-Grid-Technologie. Am Ende der Präsentation sagte sie etwas über die alten CSS-Eigenschaften und ihre Worte fielen mir auf. Es klang nämlich so: „Das Bild wurde ausschließlich mit der gut unterstützten Eigenschaft„ border-radius . Denken Sie daran, dass altes CSS noch vorhanden ist und weiterhin nützlich sein kann. Du musst nicht immer etwas völlig Neues verwenden, um Effekte zu erzielen. "

Einige Zeit nach dieser Aufführung kam mir der Gedanke, dass der Kreis nur ein kleiner Teil dessen ist, was mit dem border-radius . Fasziniert von dieser Idee habe ich mich entschlossen, mit dieser Immobilie richtig umzugehen.

Randradius beherrschen

▍ Einzelbedeutung

Beginnen wir mit den Grundlagen. Ich hoffe, Ihnen wird dieses Beispiel nicht langweilig. Möglicherweise sind Sie mit CSS und der Eigenschaft "Rahmenradius" vertraut. Es existiert schon seit einiger Zeit und sie verwenden es hauptsächlich, um eine einzelne Bedeutung anzuzeigen. Es sieht so aus border-radius: 1em . Vielleicht war dies eine der am meisten diskutierten CSS3-Funktionen im Jahr 2010, als css3please.com der beste Freund des Designers war.

Wenn Sie einen einzelnen Wert für den border-radius Ecken des Elements entsprechend diesem Wert gerundet.


Rundet alle Ecken eines Quadrats auf einen einzelnen Randradiuswert

Wie Sie dem obigen Beispiel entnehmen können, können Sie feste Werte nicht nur festlegen, indem Sie Maßeinheiten wie px , rem oder em , sondern auch ein Prozentzeichen. Dies wird normalerweise verwendet, um quadratische Kreise zu erstellen, wenn border-radius auf 50% eingestellt ist. Der Prozentwert basiert auf der Breite und Höhe des Elements. Wenn es auf Rechtecke angewendet wird, sind die resultierenden Winkel daher nicht symmetrisch. Hier ist ein Beispiel, das den Unterschied zwischen den Eigenschaften " border-radius: 110px und " border-radius: 110px border-radius: 30% die auf ein Rechteck angewendet werden.


Abrunden der Ecken eines Rechtecks

Achten Sie darauf, dass die Ecken des rechten Rechtecks ​​asymmetrisch sind, und denken Sie daran. Es wird uns etwas später nützlich sein.

▍ Vier separate Werte

Wenn Sie mehr als einen border-radius verwenden, passen Sie die Einstellungen für jede Ecke an, beginnend von oben links und im Uhrzeigersinn. Auch hier können Sie Prozentwerte verwenden. Sie können auch mit festen Werten gemischt werden.


Festlegen von Parametern für die vier Ecken eines Elements

▍ Acht durch einen Schrägstrich getrennte Werte

Ich denke, viele von Ihnen haben bereits alles versucht, worüber wir oben gesprochen haben. Jetzt ist die Zeit für einige wirklich interessante Experimente. Was passiert, wenn die Werte durch einen Schrägstrich getrennt und bis zu acht angegeben werden? Schauen Sie sich zunächst die Spezifikation an . Wenn die Werte vor und nach dem Schrägstrich angegeben werden, geben die Werte vor dem Schrägstrich den horizontalen Radius und die Werte nach dem vertikalen an. Wenn kein Schrägstrich vorhanden ist, sind beide Radien gleich.

Werte vor dem Schrägstrich sind also für horizontale Abstände verantwortlich, und Werte nach dem Schrägstrich sind für vertikale Abstände verantwortlich. Das alles ist gut, aber hier stellt sich eine logische Frage: "Worüber reden wir?" Erinnern Sie sich an die prozentualen Werte der Abrundung der Ecken, die für rechteckige Formen festgelegt wurden? Dort wurden unterschiedliche Absolutwerte für vertikale und horizontale Abstände angewendet und asymmetrisch abgerundete Ecken vorhanden. Genau dies können Sie erreichen, indem Sie beim Festlegen des Rahmenradius einen Schrägstrich verwenden.

Vergleichen wir die Effekte, die die folgenden Einstellungen ergeben: border-radius: 4em 8em und border-radius: 4em / 8em . Die Ergebnisse werden sehr unterschiedlich sein.


Die symmetrischen Winkel des linken Elements sind ein Viertel eines Kreises, und die asymmetrischen Winkel des linken Elements sind Teile einer Ellipse

Um ehrlich zu sein, sehen die Zahlen, die durch Anwenden der obigen Einstellungen erhalten wurden, seltsam aus. Vergessen Sie jedoch nicht, dass Kreise mit den folgenden Parametern erstellt werden: border-radius: 50% . Der Kreis wird aufgrund der Tatsache erhalten, dass zwei Werte, die eine Seite definieren, addiert werden und 100% (50% + 50% = 100%) erhalten werden und es keine geraden Linien vom ursprünglichen Quadrat gibt. Wenn Sie im gleichen Sinne über die acht Werte nachdenken, die zum Festlegen der Eigenschaft "Randradius" verwendet werden, können Sie mit ihrer Hilfe eine Figur beschreiben, die wie ein Gitarrenpickel oder eine Zelle in einem lebenden Organismus aussieht.


Abbildung ergibt sich aus der Anwendung von 8 durch einen Schrägstrich getrennten Werten


Vier überlappende Ellipsen bilden eine Form

Ich habe eine Weile gebraucht, um mich daran zu gewöhnen. Manchmal sind all diese Konstruktionen schwer zu verstehen. Wenn Sie sich für komplexe Formen von Elementen interessieren, die mit einem Randradius anpassbar sind, können Sie dieses kleine Werkzeug verwenden.

Zusammenfassung

Jetzt, da Sie wissen, dass Sie beim Festlegen border-radius 8 Werte verwenden können, können Sie eine leichte Enttäuschung verspüren, wenn Sie das oben genannte Werkzeug ausprobiert haben, da Sie nicht jeden Wert einzeln steuern können. Wenn ja, dann hier , speziell für Sie, seine Version, die die unabhängige Konfiguration aller acht Werte unterstützt. Bevor Sie es verwenden, erinnern Sie sich an ein Gespräch aus dem Ghostbusters-Film von 1984:

- Streams nicht überqueren.
- Warum?
- Aber es wird schlimm sein.

Tatsache ist, dass wenn Sie die Manipulatoren so bewegen, dass sie sich auf einer Seite der Figur schneiden, sie sich zu verhalten beginnen ... Sagen wir einfach - es wird sich unvorhersehbar verhalten. Was kann ich sagen - überzeugen Sie sich selbst. Am Ende wird dies nicht zu einer universellen Katastrophe führen, aber denken Sie dabei daran, dass wir Sie gewarnt haben.

Liebe Leser! Verwenden Sie die CSS-Eigenschaft für den Rahmenradius?