So erstellen Sie den Randabstand in CSS

Verwenden Sie border-image :

Wir können border-image verwenden, um% zuzuweisen. co_de% als Randbild auf allen vier Seiten. Wir benötigen ein Pseudo-Element (das den übergeordneten Container überlappt), weil der Gradient nur in eine Richtung gehen kann. Farbverläufe können prozentbasierte Werte unterstützen und können sich daher an unterschiedliche Containerabmessungen anpassen. Dies kann überprüft werden, indem Sie im Schnipsel auf die linear-gradient zeigen.

Der Hauptnachteil dieses Ansatzes ist, dass die Eigenschaft div geringe Browserunterstützung hat. Aber es ist ziemlich nützlich, wenn nur IE11 + unterstützt werden muss, denn im Gegensatz zu border-image benötigt es keine festen Dimensionen, ist nicht so komplex wie box-shadow und hinterlässt auch ein Ersatz-Pseudo-Element für andere potentielle Verwendung.

Verwenden Sie clip-path :

Wir können die background-image verwenden, um% zuzuweisen. co_de% als Randbild auf allen vier Seiten. Wir benötigen ein Pseudo-Element (das den übergeordneten Container überlappt), weil der Gradient nur in eine Richtung gehen kann. Farbverläufe können prozentbasierte Werte unterstützen und können sich daher an unterschiedliche Containerabmessungen anpassen. Dies kann überprüft werden, indem Sie im Schnipsel auf die background-image zeigen.

Der Nachteil dieses Ansatzes ist auch dem vorherigen in dem Sinne sehr ähnlich, dass linear-gradient nur unterstützt wird von IE10 +. Vorteile sind die gleichen wie für den früheren erwähnt.

Sie können es nicht mit border machen, aber Sie können dies mit after und box-shadow s

sehen Sie mehr über after und box-shadow

Wenn Sie relative Höhe verwenden möchten, müssen Sie den unteren Rand entfernen oder Sie können jquery verwenden, um die Position von box-shadow

Hinweis: Ich habe contenteditable dem div gegeben, um die Änderung zu sehen, wenn mehr Inhalt hinzugefügt wird

Bearbeiten: Dies kann die Breite und Höhe nach Ihren Bedürfnissen ändern Ich habe die Idee Idee von misterMansam wunderbare Antwort

Ich gebe zu, dieser Ansatz ist verrückt, aber - als ein Experiment - wenn Sie nur modernen Browser unterstützen und Sie spielen ein wenig ^(*) mit clip-path -Eigenschaft (zum Abschneiden der Ecken) Sie könnte das versuchen:

Ссылка

Einige Werte sind in Prozent, deshalb sind vertikale Linien im höheren div kürzer (dies kann sowieso mit festen Werten gelöst werden), aber wie Sie sehen können, ist die Höhe in der Lösung nicht beteiligt. Ein weiterer Vorteil dieses Ansatzes ist die Reaktionsfähigkeit (versuchen Sie, das Ausgabefenster des Codepechs zu strecken)

^(*) : Ich habe gelogen. es ist nicht wirklich nur "ein bisschen" :)

Flexibel an allen vier Seiten

• Das :before Pseudo-Element erstellt den linken und rechten Rand
• Das :after pseudo-Element erstellt den oberen und unteren Rand
• Der Abstand der Ränder wird mit top , right , bottom und left gesteuert (wenn sowohl eine linke als auch eine rechte Eigenschaft das Element zwischen ihnen dehnt, so wie oben und unten)

Die Ränder bleiben immer die angegebene Versatzdistanz.

Hier ist eine gute Möglichkeit, um zu visualisieren, wie die Pseudo-Elemente angeordnet sind:

Beispiel