In HTML, um Grenzen in einen Div -Behälter zu zeichnen oder zu platzieren, gibt es eine einfache Methode. Benutzer können die CSS nutzen “Grenze”Eigenschaft und bewegen Sie sie mit dem CSS in das Feld des Elements“Box SchattenEigenschaft mit einem Einschubwert und setzen Sie den Wert fest. Außerdem, "Boxgröße"Wird verwendet, um die Boxgröße und den Wert zu definieren"GrenzschachtelBeinhaltet Polsterung und Rand in der Breite und Höhe des Elements.

Dieser Beitrag erläutert das Verfahren zum Platzieren des Randes in die DIV und nicht am Rande.

Wie man Rand in Div und nicht am Rande stellt?

Probieren Sie das genannte Verfahren aus, um den Rand in die DIV und nicht am Rande zu platzieren.

Schritt 1: Überschrift einfügen

Fügen Sie zunächst eine Überschrift mit Hilfe eines Überschriften -Tags von "hinzu"

" Zu "

”. Um dies zu tun, die

Tag wird verwendet:

LinuxHint Ltd UK

Schritt 2: DIV -Container machen

Als nächstes verwenden Sie die “Tag, um einen Container zu erstellen. Fügen Sie auch das Klassenattribut in das DIV -Eröffnungs -Tag ein. Benutzer können auch mehrere Klassenattribute im einzelnen Div -Container hinzufügen, indem sie einem Klassenattribut Namen zuweisen. Zum Beispiel werden wir drei verschiedene Klassennamen in einem Container festlegen “Kasten","Kreis", Und "Grenze”:

Schritt 3: Stilüberschrift

Greifen Sie dann auf die Überschrift zu und wenden Sie verschiedene CSS -Eigenschaften zum Styling an:

H1
Schriftstil: kursiv;
Farbe blau;

Hier:

• “SchriftstilEigenschaft gibt den Schriftstil an als “ankursiv”.
• “Farbe"Wird verwendet, um die Überschriftenfarbe als" als "festzustellen" verwendet "Blau”.

Schritt 4: Style "Box" -Klasse

Zugang nun auf die “.Kasten”Klasse mit dem Punktauswahl. Wenden Sie dann die folgenden CSS -Eigenschaften an:

.Kasten
Höhe: 160px;
Breite: 160px;
Hintergrund: RGB (161, 229, 250);
Rand: 20px 50px;

Nach dem angegebenen Code -Snippet:

• “Höhe”Definiert die Größe des Elements vertikal.
• “BreiteEigenschaft verteilt dem Element eine bestimmte Breite.
• “HintergrundDie Eigenschaft setzt eine bestimmte Farbe auf den Hintergrund des Elements.
• “Rand”Definiert Räume um das Element.

Ausgang

Schritt 5: Stil „Grenze“

Verwenden Sie die “.Grenze”Für den Zugriff auf die zweite Klasse und Anwenden von Eigenschaften, die unten aufgeführt sind:

.Grenze
Grenze: 20px solide RGB (161, 229, 250);
Kastengrößen: Border-Box;
Box-Shadow: Einschub 0px 0px 0px 12px RGB (15, 15, 15);

Hier:

• “GrenzeEigentum definiert eine Grenze außerhalb des Elements.
• “Boxgröße"Wird verwendet, um die Größe des Box und den Wert zu definieren"GrenzschachtelBeinhaltet Polsterung und Rand in der Breite und Höhe des Elements.
• “Box SchattenEigenschaft fügt einen Schatten außerhalb eines Elements ein. Um dies zu tun, die “Einsatz"Wert wird mit einer bestimmten Farbe als" festgelegt "RGB (15, 15, 15)”.

Ausgang

Schritt 6: Style "Circle" -Klasse

Greifen Sie auf die dritte Klasse zu, indem Sie ihre verwenden “.Kreis”:

.Kreis
Grenzradius: 50%;

Dann wenden Sie die “an“GrenzradiusEigentum, um die Kurve von allen Seiten rund zu machen. Insbesondere wird es verwendet. Benutzer können kreisförmige Ecken mit Hilfe eines einzelnen Radius oder elliptischen Ecken mit zwei Radien erstellen.

Ausgang

Das ging nur darum, den Rand in die DIV zu legen und nicht am Rande.

Abschluss

Um den Rand in die DIV und nicht am Rande zu legen, erstellen Sie zunächst einen DIV -Behälter mit Hilfe von “”. Als nächstes fügen Sie einen Rand mit der "hinzu"Grenze”Eigenschaft und nutzen“Kastengrößen”Für die Definition der Größe der Box. Sein Wert beinhaltet eine Grenze und Polsterung in der Breite und Höhe des Elements. Danach nutzen Sie die “Box SchattenEigenschaft, die einen Schatten außerhalb eines Elements einfügt. Diese Beschreibung hat das Verfahren zum Platzieren des Randes innerhalb eines DIV, nicht jedoch am Rande, gezeigt.