Setzen den inneren Rahmen in CSS
-
Verwenden Sie die Eigenschaft
box-sizing
, um den inneren Rahmen in CSS festzulegen -
Verwenden Sie die Eigenschaft
box-shadow
, um den inneren Rahmen in CSS festzulegen -
Verwenden Sie die Eigenschaften
outline
undoutline-offset
, um den inneren Rahmen in CSS festzulegen
![Setzen den inneren Rahmen in CSS](/img/CSS/feature-image---css-inner-border.webp)
In diesem Artikel stellen wir Methoden vor, um Rahmen innerhalb eines Containers in CSS zu setzen. Die Grenze innerhalb eines Containers wird als innere Grenze bezeichnet.
Verwenden Sie die Eigenschaft box-sizing
, um den inneren Rahmen in CSS festzulegen
Wenn wir einem Element innerhalb eines Containers einen Rahmen oder eine Auffüllung hinzufügen, wird der Container größer. Die Größe wird von der ursprünglichen abweichen. Um das Problem zu beseitigen, können wir dem Container einen inneren Rahmen hinzufügen.
Der innere Rahmen ist ein Raum, der zwischen Rahmen und Umrisseigenschaft oder -element erstellt wird. Wir können einen inneren Rahmen auf Tabelleninhalte, Bilder und Text von Absätzen und Überschriften anwenden. Ein innerer Rahmen kann eine beliebige Form haben, z. B. rechteckig, quadratisch, kreisförmig usw. Der innere Rahmen erhöht die Größe des Containers nicht und die vordefinierte Größe bleibt konstant. Wir können die Eigenschaft box-sizing
verwenden, um in CSS einen inneren Rahmen zu erstellen. Wenn Sie die Eigenschaft box-sizing
auf border-box
setzen, werden der Rahmen und die Auffüllung innerhalb der Dimension des Containers eingeschlossen.
Gestalten Sie beispielsweise ein div
, indem Sie die Eigenschaft box-sizing
auf border-box
setzen. Setzen Sie die Höhe und Breite von div
auf 200px
. Als nächstes erstellen Sie einen festen
Rahmen von 10px
Breite und roter
Farbe. Setzen Sie dann die Eigenschaft background
auf green
.
Hier haben wir ein div
mit den Maßen 200x200 px
erstellt. Auch wenn wir einen Rand von 10px
hinzugefügt haben, hat sich die Dimension des Containers nicht geändert. Die Grenze liegt innerhalb des Containers. Somit können wir die Eigenschaft box-sizing
verwenden, um den inneren Rahmen in CSS zu setzen.
Beispielcode:
div {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
width: 200px;
height: 200px;
border: 10px solid red;
background: green;
}
<div></div>
Verwenden Sie die Eigenschaft box-shadow
, um den inneren Rahmen in CSS festzulegen
Eine andere Möglichkeit, den inneren Rand zu erreichen, besteht darin, die CSS-Eigenschaft box-shadow
zu verwenden. Mit der Eigenschaft können wir den eingefügten Schatten angeben, der eher wie ein innerer Rahmen als ein Schatten aussieht.
Als erste beiden Werte können wir die horizontalen und vertikalen Offsetwerte für box-shadow
einstellen. Die anderen drei Werte Unschärfe, Streuung und Farbe sind optional. Wir können den Ausbreitungsradius auf den gewünschten Wert einstellen, um einen Schatten zu erzeugen. Dann wird mit der Option inset
der äußere Schatten in den inneren Schatten geändert. Der Schatten fällt in den Behälter. Schließlich sieht es aus wie eine innere Grenze.
Legen Sie beispielsweise die Eigenschaften height
und width
von div
auf 200px
fest. Setzen Sie die Hintergrundfarbe auf Grün. Verwenden Sie dann die Eigenschaft box-shadow
und setzen Sie die ersten drei Optionen auf 0px
. Streuradius einstellen, die vierte Option auf 10px
. Geben Sie die Farbe Rot ein und setzen Sie die Option Einfügung
.
Hier haben wir mit der Eigenschaft box-shadow
einen inneren Rahmen mit der Breite 10px
erstellt.
Beispielcode:
div {
width:200px;
height:200px;
background-color:green;
box-shadow:0px 0px 0px 10px red inset;
}
<div></div>
Verwenden Sie die Eigenschaften outline
und outline-offset
, um den inneren Rahmen in CSS festzulegen
Den inneren Rahmen können wir mit den CSS-Eigenschaften outline
und outline-offset
festlegen. Die Eigenschaft outline
beschreibt die Rahmengröße, den Rahmentyp und die Rahmenfarbe des Elements. Die Eigenschaft outline-offset
beschreibt den Abstand bzw. Abstand zwischen Rahmen und Konturelement.
Stellen Sie beispielsweise die Höhe und Breite des div
auf 200px
. Geben Sie grüne Farbe als Hintergrund. Als nächstes stellen Sie outline
als 5px solid red
ein. Stellen Sie dann outline-offset
auf -5px
.
Hier erzeugt die Eigenschaft outline
eine äußere Umrandung im Container. Wenn Sie die Eigenschaft outline-offset
verwenden und sie auf den negativen Wert der Breite des Rahmens setzen, wird der äußere Rahmen in den inneren Rahmen geändert.
Beispielcode:
div {
width: 200px;
height: 200px;
background: green;
outline: 5px solid red;
outline-offset: -5px;
}
<div></div>