Der Stil einer HTML -Website wird von CSS kontrolliert, was auch ein grundlegender Bestandteil von HTML ist. Eine der von CSS bereitgestellten Styling -Eigenschaften ist die “Grenze" Eigentum. Meistens werden Grenzen außerhalb der Elemente erstellt, aber CSS ermöglicht es uns, mit Hilfe verschiedener Eigenschaften einen Rand in ein Element einzufügen.

In diesem Artikel lernen wir das Verfahren, um Grenzen in die DIV zu platzieren

• Box-Shadow-Eigenschaft
• Umriss mit Umriss-Offset-Eigenschaft
• Boxgrößeneigenschaft

So lass uns anfangen!

Methode 1: Legen Sie einen Rand in einem DIV mit der Eigenschaft "Box-Shadow"

Wir können einen Rand in die DIV mit der “platzieren“Box Schatten" Eigentum. Gehen Sie also zunächst die Eigenschaft Box-Shadow und ihre Funktionalität durch.

Was ist „Box-Shadow“ -Mobilie?

In CSS, die “Box SchattenDie Eigenschaft ermöglicht es uns, einen Schatten auf jedes Element oder Bild zu setzen. Diese Eigenschaft basiert auf den folgenden Werten:

• Offset-X: Es wird verwendet, um horizontalen Schatten hinzuzufügen.
• Offset-y: Es wird verwendet, um vertikalen Schatten hinzuzufügen.
• Farbe: Es wird verwendet, um die Farbe des Schattens zu platzieren.

Syntax

Um diese Punkte zu klären, wechseln wir zur Syntax der Box-Shadow-Eigenschaft:

Box-Shadow: Offset-X Offset-y Blur-Radius Spread Farbeinschub;

Hier ist die Beschreibung im Zusammenhang mit den oben genannten Werten:

• “Offset-X" Und "Offset-y”Kann positiv oder negativ sein.
• “BluR-RadiusMacht den Schatten heller oder leichter.
• Durch die Nutzung "Ausbreitung”, Sie können die Größe des Schattens festlegen.
• Anstelle von "Farbe”, Sie werden jede Farbe zuweisen, die Sie dem Bild geben möchten.
• “Einsatz”Wird verwendet, um den Schatten in das Element einzustellen. Wenn Sie es nicht verwenden, erscheint ein Schatten außerhalb der Box.

Notiz: “BluR-Radius","Ausbreitung", Und "Einsatz”Sind die optionalen Werte der Box-Shadow-Eigenschaft. Sie können diese Werte in einigen speziellen Fällen verwenden.

Um ein besseres Verständnis für die Nutzung der Box-Shadow-Immobilie zu verstehen, lassen Sie uns ein praktisches Beispiel implementieren.

Beispiel

Im Abschnitt HTML erstellen wir einen Container mit Tag und Heading

im Inneren.

Html

"Solider Rand im Div"

Als nächstes werden wir in der CSS -Datei verwenden “div”Zu Zugang zum bereits erstellten DIV und in die Grenze in sie in die angegebenen Anweisungen in sie in die Innenräume platziert:

• Setzen Sie die Breite und Höhe des Div als “als“700px" Und "250px”.
• Geben Sie die Textfarbe als “anRGB (13, 214, 214)”.
• Legen Sie die Werte für die Textausrichtung mithilfe der Eigenschaft zur Linienhöhe als “fest200px”Und Text-Align-Eigenschaft als“Center”.
• Stellen Sie die Hintergrundfarbe der DIV als "die Hintergrundeigenschaft als„ Hintergrundeigenschaft an “festSchwarz”.
• Erstellen Sie eine Grenze mit einem Grenzeigentum mit “mit“15px" Breite, "solideForm und “Schwarz" Farbe.
• Verwenden Sie für Inside Shadow die “Box Schatten”Eigenschaft und setzen Sie den Wert von Offset-X, Offset-Y und Unschärfe als"0px", Verbreiten als"5px", Die Farbe des Schattens als"RGB (255, 251, 0)"Und benutzen"Einsatz”Um die Grenze innerhalb der Div zu legen.

CSS

div
Breite: 700px;
Höhe: 250px;
Farbe: RGB (255, 238, 0);
Zeilenhöhe: 200px;
Text-Align: Mitte;
Hintergrund: Schwarz;
Grenze: 15px solide Schwarz;
Box-Shadow: 0PX 0PX 0PX 5PX RGB (255, 238, 0) Einschub;

Notiz: Der Wert von Offset-X und Offset-y wird als 0 eingestellt, da wir an allen Seiten der DIV Grenzen benötigen.

Gehen Sie nach der Implementierung des angegebenen Code in die HTML -Datei und führen Sie ihn aus, um das folgende Ergebnis zu sehen:

Notiz: Durch Erhöhen des Wertes der “Ausbreitung”, Sie können die Breite der Grenze erhöhen.

Methode 2: Legen Sie einen Rand in einem DIV mit „Umriss“ und „Umriss-Offset“ -Mobilie in die DIV

Der "UmrissDie Eigenschaft wird verwendet, um die Linie außerhalb des Elements einzustellen. Es ist das Kurzeigeneignis von “Umrissbreite","Umrissstil", Und "Umrissfarbe”. Die Syntax der Umrisseigenschaft lautet wie folgt:

Umriss: Umriss-Breiten-Umrissstil-Umriss-Color

Hier ist die Beschreibung im Zusammenhang mit den oben genannten Werten:

• Umrissbreite: Es wird verwendet, um die Breite des Umrisss einzustellen.
• Umrissstil: Es wird verwendet, um den Stil des Umrisss festzulegen.
• Umrissfarbe: Es wird verwendet, um die Umrissfarbe anzugeben.

In ähnlicher Weise die “Umriss-OffsetDie Eigenschaft wird verwendet, um den Raum zwischen der Kante des Elements und dem Umriss einzustellen. Dieser Raum ist transparent. Die Syntax der Umriss-Offset-Eigenschaft lautet:

Umriss-Offset: Wert

An der Stelle des Wertes können Sie den Speicherplatz einstellen, den Sie zwischen der Kante des Elements und dem Umriss einstellen möchten. Es schafft einen Umriss innerhalb des Elements, wenn ein negativer Wert angegeben wird.

Wechseln wir zum Beispiel, einen Grenze innerhalb der DIV zu erstellen.

Beispiel

In diesem Beispiel werden wir zwei Divs mit Klassennamen erstellen “Div1" Und "Div2”Und fügen Sie eine Überschrift darin hinzu

Schild.

Html

"Ridge Grenze im Div"

"Doppelrand im Div"

In CSS verwenden "Div1”Zu dem Container zugreifen, den wir in der HTML -Datei erstellt haben. Folgen Sie den angegebenen Anweisungen, um den Rand in die DIV einzulegen:

• Setzen Sie die Breite und Höhe des Div als “als“500px”.
• Passen Sie den Radius des Randes an “an“ an “50%”.
• Stellen Sie die Farbe des Textes als "festRGB (13, 214, 214)”.
• Legen Sie die Werte für die Textausrichtung mithilfe der Eigenschaft zur Linienhöhe als “fest500px”Und Text-Align-Eigenschaft als“Center”.
• Stellen Sie die Hintergrundfarbe der DIV als "die Hintergrundeigenschaft als„ Hintergrundeigenschaft an “festSchwarz”.
• Erstellen Sie eine Grenze mit Grenzeigenschaft als “15px","solide", Und "Schwarz”.
• Verwenden Sie für den Innenrand die “UmrissEigenschaft und setzen Sie den Wert als "10px","Grat", Und "RGB (0, 255, 242)"Und setzen Sie den Wert von"Umriss-Offset" als "-25px”Die Grenze in die Div in die DIV platzieren.

CSS

.div1
Breite: 500px;
Höhe: 500px;
Grenzradius: 50%;
Farbe: RGB (13, 214, 214);
Linienhöhe: 500px;
Text-Align: Mitte;
Hintergrund: Schwarz;
Umriss: 10px Ridge RGB (0, 255, 242);
Umriss -Offset: -25px;

Ändern Sie für das Styling der zweiten Div nur den Umrissstil mit der “UmrissEigenschaft und setzen Sie die Werte wie folgt:

Umriss: 10px Double RGB (0, 255, 242);

Methode 3: Stellen

CSS “KastengrößenEigenschaft berechnet die Breite und Höhe des Elements. Die Syntax der Boxgrößeneigenschaft lautet:

Kastengrößen: Wert

An der Stelle des Wertes können Sie den Wert der Boxgrößen als "festlegen" festlegen "Content-Box" Und "Grenzschachtel”.

Beispiel

Im folgenden Beispiel werden wir einen Div -Klasse -Namen erstellen “Div1Und fügen Sie eine Überschrift darin hinzu.

Html

"Groove -Grenze im Div"

Im CSS werden wir verwenden “Div1”Zugriff auf die erstellte DIV. Führen Sie als nächstes den Rand in die DIV wie folgt ein:

• Setzen Sie die Breite und Höhe des Div als “als“550px”.
• Stellen Sie die Farbe des Textes als "festRGB (2, 255, 137)”.
• Legen Sie die Werte für die Ausrichtung des Textes mithilfe der Eigenschaft zur Linienhöhe als „fest“ fest420px”Und Text-Align-Eigenschaft als“Center”.
• Stellen Sie die Hintergrundfarbe der DIV als "die Hintergrundeigenschaft als„ Hintergrundeigenschaft an “festSchwarz”.
• Erstellen Sie einen Rand unter Verwendung von Grenzeigenschaften als “50px","Rille", Und "RGB (81, 255, 0)”.
• Verwenden Sie als nächstes die “GrenzeEigenschaft und setzen Sie den Wert als "50px","Rille", Und "RGB (81, 255, 0)"Und setzen Sie den Wert von"Kastengrößen" als "Grenzschachtel”Die Grenze in die Div in die DIV platzieren.

.div1
Breite: 550px;
Höhe: 550px;
Farbe: RGB (2, 255, 137);
Zeilenhöhe: 420px;
Text-Align: Mitte;
Hintergrund: Schwarz;
Grenze: 30px Groove RGB (81, 255, 0);
Kastengrößen: Border-Box;

Nach der Implementierung des angegebenen Code sehen Sie die folgende Ausgabe:

Wir haben die drei einfachsten Möglichkeiten für die Platzierung einer Grenze innerhalb eines DIV mit CSS bereitgestellt.

Abschluss

Um einen Rand in die DIV in die DIV zu legen, schaffen Sie zuerst einen Grenze mit der “Grenze”Eigenschaft, dann verwenden Sie die“Box Schatten" Und "Umriss" mit "Umriss-Offset" Und "KastengrößenEigenschaften von CSS. Das Grenzeigentum erzeugt einen Rand um das Element, und die anderen vier Eigenschaften können verwendet werden, um die Grenze innerhalb der DIV zu bewegen. Infolge dieses Artikels haben wir Ihnen die drei einfachsten Methoden gezeigt, um Grenzen innerhalb der DIV zu platzieren.
Um einen Rand in die DIV in die DIV zu legen, schaffen Sie zuerst einen Grenze mit der “Grenze”Eigenschaft, dann verwenden Sie die“Box Schatten" Und "Umriss" mit "Umriss-Offset" Und "KastengrößenEigenschaften von CSS. Das Grenzeigentum erzeugt einen Rand um das Element, und die anderen vier Eigenschaften können verwendet werden, um die Grenze innerhalb der DIV zu bewegen. Infolge dieses Artikels haben wir Ihnen die drei einfachsten Methoden gezeigt, um Grenzen innerhalb der DIV zu platzieren.