Setzen den inneren Rahmen in CSS

1. Verwenden Sie die Eigenschaft box-sizing, um den inneren Rahmen in CSS festzulegen
2. Verwenden Sie die Eigenschaft box-shadow, um den inneren Rahmen in CSS festzulegen
3. Verwenden Sie die Eigenschaften outline und outline-offset, um den inneren Rahmen in CSS festzulegen

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>