Auf unserer Webseite können viele Formen verwendet werden, um ein besseres Design wie Kreise, Quadrate, Rechtecke und mehr zu erstellen. Diese Formen können mit verschiedenen CSS -Eigenschaften erstellt werden. Insbesondere sind abgerundete Ecken der Box effektiver als spitze Ecken, da sie unsere Augen leicht folgen lassen.

In diesem Artikel wird das Verfahren zur Verwendung von CSS-Border-Radius-Eigenschaften zum Erstellen von Kisten mit abgerundeten Ecken erörtert.

So erstellen Sie Kästchen in HTML?

Fügen Sie zum Erstellen von zwei Kästchen zwei Klassen -Divelelemente mit den Namen hinzu “Box-1" Und "Box-2”, Und hinzufügen

Element mit der Überschrift in jedem der Divelelemente wie folgt:

Beispiel Box 1

Beispiel Box 2

Wenden Sie nun CSS -Stile auf die HTML -Elemente an.

Stil H1 -Element

H1
Polsterung: 50px;

Der

Das Element wird mit der Polstermobilie als „zur Verfügung gestellt“50pxUm den angegebenen zusätzlichen Platz innerhalb der Überschrift zu erstellen.

Style Box-1 und Box-2 Divelemente

#Box-1,
#Box-2
Rand: 1PX Auto;
Breite: 250px;
Höhe: 120px;
Hintergrundfarbe: Schokolade;
Schriftgröße: 10px;
Farbe: Ghostwhite;

Die CSS-Eigenschaften, die auf die Box-1 und Box-2 Div angewendet werden, sind unten beschrieben:

• “BreiteDie Eigenschaft setzt die Breite Eigenschaft auf 250px.
• “HöheDie Eigenschaft wird für die Einstellung der Höhe des Elements auf 250px verwendet.
• “HintergrundfarbeDie Eigenschaft wird verwendet, um die Hintergrundfarbe des Elements anzugeben.
• “SchriftgrößeDie Eigenschaft wird für die Einstellung der Schriftgröße des Elements verwendet.
• “FarbeDie Eigenschaft wird für die Einstellung der Schriftfarbe verwendet.

Durch die Bereitstellung des oben genannten Codes werden die erstellten Kästchen wie folgt angezeigt:

Es kann beobachtet werden, dass Boxen erstellt werden, aber ihre Ecken sind immer noch gezeigt. Der folgende Abschnitt erläutert die Verwendung des Rand-Radius-Eigentums, um Kisten mit abgerundeten Ecken herzustellen.

Was ist CSS Grenz-Radius-Eigentum?

Das CSS “GrenzradiusDie Eigenschaft wird verwendet, um den Radius des Elements zu definieren. Diese Eigenschaft kann aus einem bis vier Werten bestehen. Diese Werte werden nachstehend erläutert.

Syntax- ein Wert

Border-Radius: alle [ / alle];

Eine Wertsyntax bezieht sich auf den Radius aller vier Ecken der Box.

Syntax3- zwei Werte

Border-Radius: Oben links und unten rechts oben rechts und unten links
[ / obere links & unten-Rechts oben rechts & unten links];

Zwei Wertesyntax geben den Radius an, da der erste Wert den Radius an den Ecken oben links und unten rechts angibt, und der zweite Wert gibt den Radius an den Ecken des oberen rechten und unteren linken Links an.

Syntax- Drei Werte

Border-Radius: obere linke obere rechte und untere linke Bodenrechte
[ / obere linke obere rechte und untere linke untere rechte rechte];

Drei Werte Syntax gibt an, dass der erste Wert die obere linke Ecke darstellt.

Syntax-vier Werte

Border-Radius: Oben links oben rechts unten rechts unten links
[ / obere linke obere rechte untere rechte untere links];

Vier Wertesyntax gibt an.

So erstellen Sie mit CSS abgerundete Eckkästen?

In dem Abschnitt "unten Code" wird erläutert, wie wir runde Eckboxen erstellen können.

Style Box-1

#Box-1
Hintergrundfarbe: RGB (255, 183, 0);
Border-Radius: 100px 2px 100px 1px;

Das Box-1 Div-Element wird mit Eigenschaften angewendet, die unten beschrieben werden:

• “HintergrundfarbeDie Eigenschaft wird verwendet, um die Hintergrundfarbe des Elements festzulegen.
• “Grenzradius"Mit dem Wert festgelegt als"100px 2px 100px 1pxWobei 100px die obere linke Ecke angibt, 2px angibt die obere rechte Ecke, 100px zeigt die untere rechte Ecke an und 1px zeigt die untere linke Ecke an.

Style Box-2

#Box-2
Hintergrundfarbe: Darkcyan;
Grenzradius: 30px;

Die Eigenschaften, die auf das Box-2 Div-Element angewendet werden, werden nachstehend beschrieben:

• “HintergrundfarbeDie Eigenschaft legt die Farbe des Box-2 Div-Elements mit dem "fest"Darkcyan" Farbe.
• “Grenzradius”Eigenschaft mit dem Wert als"30px”Stellt den Kastenradius von allen vier Ecken auf 30px ein.

Um die Ecken der Box zu ändern, können die Werte der Rand-Radius-Eigenschaft entsprechend festgelegt werden. Durch die Bereitstellung der oben genannten CSS-Styling-Eigenschaften für Box-1- und Box-2-Divelelemente sieht das Ergebnis so aus:

Wir haben das Grundstück Grenzradius erfolgreich gelernt, um die runden Ecken einzelner oder mehrerer Kisten zu erstellen.

Abschluss

Um ein besseres Design für unsere Webseite zu erstellen, können verschiedene Formen verwendet werden, z. B. Kreise, Quadrate, Rechtecke und mehr können mit CSS erstellt werden. Die Kisten mit abgerundeten Ecken können in CSS durch Verwendung des CSS erstellt werdenGrenzradius" Eigentum. In diesem Artikel wurde die Verwendung von CSS-Grenzradius zum Erstellen von Kisten mit abgerundeten Ecken mit Beispielen gezeigt.