Das CSS -Styling ist ein zentraler Bestandteil von HTML, mit dem eine Website präsentabel ist. CSS ermöglicht unterschiedliche Styling -Eigenschaften, von denen eines das ist “Grenzbild" Eigentum. Mit Hilfe der genannten Eigenschaft können Sie ein Bild als Rand eines HTML -Elements anstelle des typischen Randstils festlegen.

In diesem Leitfaden wird angezeigt, wie das CSS-Border-Image-Eigentum verwendet wird.

So verwenden Sie CSS-Grundstücksbetriebseigentum?

Die Eigenschaftseigenschaft wird verwendet, um das Bild als Grenze um ein Element zu setzen.

Syntax

Die Syntax des Grenzbildes ist:

Grenzbild: Quelle Slice / Britth Outset Repeat

Grenzbild ist ein Kurzeigeneignis von CSS mit fünf verschiedenen Eigenschaften wie:

• Grenz-Image-Source: Es wird verwendet, um die Bildquelle anzugeben.
• Grenz-Image-Slice: Es wird verwendet, um das Bild des Randes zu schneiden.
• Grenzbildbreite: Es wird verwendet, um die Breite der Grenze zu setzen.
• Grenz-Image-Outset: Es wird verwendet, um die Menge an Platz zu setzen, die das Grenzbild aus dem Grenzrahmen nimmt.
• Grenzbild-Repeat: Es wird verwendet, um die Wiederholung des Grenzbildes zu vermeiden und den Grenzbereich zu füllen.

Notiz: Wenn wir nur die Bildquelle anstelle aller Werte angeben, wird der Bildrand entsprechend den Standardwerten dieser Eigenschaften festgelegt.

Um perfekt zu verstehen, wechseln Sie zum praktischen Beispiel des Rand-Image-Eigentums.

Beispiel: Setzen Sie ein Bild als Rand mit Grenzbild-Eigenschaft

Um einen Bildrand um ein Element zu erstellen, fügen Sie zunächst ein Element in eine HTML -Datei hinzu. Dazu werden wir a erstellen und ein “zuweisen“GrenzeKlasse dazu. Danach werden wir eine Überschrift und einen Absatz verwenden

Und

Stichworte.

Html

LinuxHint

Bildrand

Wechseln Sie nun zu CSS und wenden Sie eine Grenzbild-Eigenschaft auf den erstellten Container an.

Hier haben wir benutzt “.Grenze”Zugriff auf die im HTML erstellte DIV. Als nächstes werden wir das anwenden “Grenze"Eigentum zu ihm und setzen Sie die Werte der Grenze als"30px" Und "solide", bzw. Im nächsten Schritt werden wir die „verwenden“GrenzbildEigenschaft und setzen Sie die Werte von Quelle, Slice, Breite, Beginn und wiederholen Sie als “Bild.JPG","50","30px","40px", Und "runden”. Darüber hinaus werden wir den Wert der Text-Align-Eigenschaft als “zuweisenCenter", Schriftgröße als"50px"Und Farbeigenschaft als" als "RGB (3, 59, 7)”Um die Überschrift und Absatz zu stylen.

CSS

.Grenze
Grenze: 30px fest;
Grenzbild: URL ('Bild.JPG ') 50 / 30px 40px Runde;
Text-Align: Mitte;
Schriftgröße: 50px;
Farbe: RGB (3, 59, 7);

Sobald Sie den oben genannten Code implementiert haben, gehen Sie zur HTML -Datei und führen Sie ihn aus. Infolgedessen sehen Sie die folgende Ausgabe:

Das übergegebene Bild zeigt, dass die Eigenschaftseigenschaft erfolgreich implementiert wird.

Beispiel 2: Setzen Sie ein Bild als Rand mit Standardwerten der Rand-Image-Eigenschaft

In diesem Beispiel geben wir nur die Bildquelle an und überprüfen deren Auswirkungen auf die Image-Border-Eigenschaft.
Hier zuweisen wir nur die Bildquelle als “Bild.JPG”Zum Grenzbildeigentum. Die verbleibenden Eigenschaften werden gemäß dem vorherigen Beispiel gleich sein.

CSS

.Grenze
Grenze: 30px fest;
Grenzbild: URL ('Bild.JPG ');
Text-Align: Mitte;
Schriftgröße: 50px;
Farbe: RGB (3, 59, 7);

Ausgang

Hier können wir sehen, dass der Bildrand nur in den Ecken der Div platziert ist. Es ist, weil das “GrenzbildDie Eigenschaft verwendet vordefinierte Werte für alle verbleibenden Parameter.

Abschluss

Der "GrenzbildDie Eigenschaft wird verwendet, um das Bild als Rand um alle HTML -Elemente zu setzen. Sie können unterschiedliche Werte der Rand-Image-Eigenschaft zum Styling der Grenze festlegen. Wenn Sie keine Werte seiner Parameter angeben, wendet die Image-Gr-Eigenschaft ihr Standardverhalten an. In diesem Artikel haben wir erklärt.