Wie man innere Grenze in CSS setzt

Wenn ein Rand in den Behälter platziert wird, ist er als innere Grenze bekannt. Innere Grenzen werden verwendet, um den Behälter stabil zu machen. Wenn ein Behälter erzeugt wird. Um diese Situation zu vermeiden, wird ein Rand in den Behälter gelegt.

In diesem Artikel werden wir lernen, wie man die innere Grenze in CSS festlegt.

Wie man innere Grenze in CSS setzt?

In CSS kann ein innerer Rand unter Verwendung der folgenden Eigenschaften festgelegt werden:

• Boxgrößeneigenschaft
• Umrissen des Eigentums
• Box-Shadow-Eigenschaft

Erkunden wir jede Eigenschaft mit nützlichen Beispielen.

Methode 1: Verwenden der Box-Größen-Eigenschaft, um den inneren Rand in CSS festzulegen

Der "KastengrößenDie Eigenschaft behält die Höhe und Breite des Behälters bei, wenn die Polsterung oder die Grenze hinzugefügt wird. Wenn die Eigenschaft der Boxgrößen mit der „verwendet wird“GrenzschachtelDer Wert, die Polsterung und der Rand des Elements werden in die Gesamthöhe und die Breite einbezogen.

Schauen Sie sich nun das angegebene Beispiel an.

Beispiel

Derzeit verfügt unsere Webseite über einen Container mit Höhe und Breite als “250px”. Wenn wir jedoch einen Rand hinzugefügt haben, erweitert sich der angegebene Höhen- und Breitenwert zu “276px”, Die im untergegebenen Bild zu sehen sind:

In unserer HTML -Datei haben wir eine hinzugefügt “"Mit einer Klasse"Beispiel"Und legte es in die"" Schild:

Um den erstellten Container zu stylen, setzen Sie eine “ein“."Vor dem Klassennamen als".Beispiel”. Geben Sie dann die Höhe und Breite an als “an250px”, Setzen Sie die“13px”Orangefarbener Rand und benutze die“Grenzschachtel”Als Boxgrößeneigenschaft. Darüber hinaus haben wir auch die "gesetzt"Hintergrundfarbe" als "AquaUm zwischen dem Hintergrund und dem zusätzlichen Rand zu unterscheiden.

Speichern Sie den angegebenen Code und öffnen Sie die HTML -Datei in Ihrem Browser:

.Beispiel
Hintergrundfarbe: Aqua;
Breite: 250px;
Höhe: 250px;
Grenze: 13px solide Orange;
Kastengrößen: Border-Box;

Infolgedessen wird der Rand im Behälter hinzugefügt, und die Höhe und Breite bleibt gleich:

Gehen Sie zur nächsten Methode voran!

Methode 2: Verwenden der Umrisseigenschaft, um den inneren Rand in CSS festzulegen

Das CSS “UmrissEigenschaft fügt leicht eine Linie um das Feld des Elements mit der gewünschten Breite, Farbe und Typ hinzu. Dies bedeutet. Zusätzlich die “Umriss-Offset “ Eigentum hilft bei der Einschränkung der Expansion der Grenze.

Beispiel

Präzisiere das "Umriss”Eigenschaft mit dem Wert“solide 12px orange”, Wo Orange die Farbe für die Linie ist und 12px die Breite und fest ist eine Art Stil für die Linie. Verwenden Sie dann das “Umriss-OffsetEigentum zusammen mit dem “-12px" Wert. Dadurch wird der Rand in den Behälter gelegt und die Expansion in Bezug auf den Behälter einschränkt:

.Beispiel
Hintergrundfarbe: Aqua;
Breite: 250px;
Höhe: 250px;
Umriss: Solid 12px Orange;
Umriss -Offset: -12px;

Ausgang

Wenn Sie über dem zusätzlichen Container schweben, wird die aktuelle Dimension angezeigt250 x 250”Wie in der HTML -Datei angegeben:

Ich möchte einen inneren Rand mit Schatten einstellen? Schauen wir uns den folgenden Abschnitt an.

Methode 3: Verwenden der Box-Shadow-Eigenschaft, um den inneren Rand in CSS zu setzen

Der "Box SchattenDie Eigenschaft wird hauptsächlich zum Ablegen der Schatten aus den Elementenrahmen verwendet. Die Verwendung dieser Eigenschaft auf eine bestimmte Weise kann die innere Grenze jedoch effizient einstellen.

Beispiel

Geben Sie in der HTML -Datei die an “Box Schatten”Eigenschaft mit dem Wert“Einschub 0px 0px 0px 12px Orange”, Wo Orange eine Farbe ist, macht 12px den Schatten breiter und der Einschub legt den Schatten in den Behälter. Die anderen 0PX -Werte beziehen sich auf Offsseeting und Unschärfe. Die Kombination all dieser Werte bildet einen inneren Rand unter Verwendung von Schatten:

.Beispiel
Hintergrundfarbe: Aqua;
Breite: 250px;
Höhe: 250px;
Box-Shadow: Einschub 0PX 0PX 0PX 12px Orange;

Ausgang

Um zu überprüfen, ob die Höhen- und Breitenwerte immer noch gleich sind, sehen Sie sich die Containerdimension an, indem Sie darüber schweben:

Wir haben die am besten geeigneten Methoden für die Festlegung innerer Grenzen in CSS angeboten.

Abschluss

Um den inneren Rand festzulegen, können Sie die “verwenden“Kastengrößen","Umriss", Und "Box Schatten”CSS -Eigenschaften. Die Boxgrößeneigenschaft wird verwendet, um die Expansion der zusätzlichen Grenze einzuschränken. Die Umrisseigenschaft wird in Kombination mit dem Umriss-Offset verwendet, um einen Umriss als innere Grenze hinzuzufügen. Darüber hinaus können Schatten auch für den angegebenen Zweck mit Hilfe der Box-Shadow-Eigenschaft verwendet werden. In diesem Beitrag haben wir drei Methoden beschrieben, um die innere Grenze in CSS festzulegen.