Abgerundete Grenzen in CSS
- Wie der Grenzradius funktioniert
- wie man die abgerundeten Grenzen in CSS bekommt
Wie man in CSS abgerundete Grenzen bekommt
Die abgerundeten Grenzen werden vom Grenzgeschäft des CSS unterstützt. Wir werden uns zuerst die Arbeit von Grenz-Radius-Eigentum ansehen und dann einige Beispiele geben.
Wie Grenzradius funktioniert
Das Grundstück Grenzradius ist das Kurzeigeneignis, das aus den unten angegebenen Eigenschaften besteht:
Grenze-Top-Links-Radius, Grenze-rechte Radius, Grenze-linke Bottom-Radius und Grenzrechts-Bottom-Radius.
In erster Linie hängt die Arbeit von Grenzradius von der folgenden Syntax ab:
Border-Radius: Wert;Da das grenzwertige Eigentum ein Kurzeigeneignis von vier Kindereigenschaften ist, kann sie mehr als Wert akzeptieren. Wenn Sie einen anderen Radius für verschiedene Grenzen haben möchten, können Sie eine der folgenden Möglichkeiten auswählen.
Runden Sie alle Grenzen mit der gleichen Größe um
Border-Radius: Wert;Runde obere linke/untere rechte und obere rechte/untere linft bis gleiche Größe
Border-Radius: Value1 Value2;Runde obere linke, obere rechte und untere rechte Grenzen
Border-Radius: Value1 Value2 Value3;Wenn Sie mit unterschiedlichen Größen gerundete Grenzen erhalten möchten
Border-Radius: Value1 Value2 Value3 Value4;Die bevorstehenden Beispiele werden unter Verwendung der oben angegebenen Syntax geübt.
Beispiel 1: Erhalten Sie die abgerundeten Grenzen
Der unten angegebene Code wird ausgeführt, um die abgerundeten Grenzen zu erhalten
Willkommen bei LinuxHint
Valey of Tech
Führer auf HTML
Führer auf CSS
Der Code wird als beschrieben als,
- Inside Tag werden düste Klassen mit dem Namen "One", "Two", "Three" und "Four" gemeldet
- "Eine" -Klasse wird alle Grenzen auf 20px umrunden,
- Die "zwei" -Klasse rund.
- Die „Drei“ -Klasse runden drei Grenze oberen links, oberen rechten und unteren Rechten ab
- Die dunkle Klasse wird alle Grenzen zu verschiedenen Größen umrunden
- Innerhalb des Tags werden vier Absätze erklärt, die die Verwendung der vier im Tag genannten Vier CSS -Klassen zeigen
Das Bild des Code ist unten bereitgestellt
Das Bild der Ausgabe auf der unten gezeigten Webseite:
Beispiel 2: Holen Sie sich die abgerundete Grenze der Wahl
Das obige Beispiel rundet die Grenzen in der vordefinierten Reihenfolge ab. Wenn Sie beispielsweise einen Wert mit Grenze-Radius-Eigentum verwenden, werden alle Grenzen gerund.
Sagen wir, wir wollen die grundlegende Grenze nicht abrunden. In solchen Situationen müssen Sie vier Werte verwenden und 0px anstelle des unteren rechten Randes verwenden. Der folgende Code wird verwendet, um das Beispiel für die Auswahl abgerundet zu üben:
Willkommen bei LinuxHint
Der obige Code wird beschrieben als:
- Die Rand-Radius-Eigenschaft wird in dem Style-Tag definiert, in dem der 0px das rundliche Rundgrenze überspringt
- Grenzstil wird für eine bessere Sichtbarkeit verwendet
- Im Körper wird ein Absatz geschrieben, auf dem die abgerundete Grenze verwendet wird
Das Bild des Code -Editors wird unten angezeigt:
Ausgang
Nachdem Sie dies durchgemacht haben, hätten Sie die Arbeit des Grenzradius und seine damit verbundenen Eigenschaften in verschiedenen Szenarien gelernt.
Abschluss
Das Grundstück Grenzradius ermöglicht es, die abgerundeten Grenzen in CSS zu erhalten. Der Grenzradius ist das Kurzhandel und enthält Funktionalitäten von vier Eigenschaften darin. Dieser Artikel zeigt die möglichen Möglichkeiten, die abgerundeten Grenzen in CSS zu erhalten. Zu diesem Zweck haben wir die Arbeit von Grenzgeschäftseigentum in CSS vorgestellt. Darüber hinaus haben wir für ein besseres Verständnis mehrere Beispiele gezeigt, die Sie an den abgerundeten Grenzen in CSS mit Grenzgeschwindigkeitseigentum bringen.