Dekorieren des Netzes mit CSS -Randbildern

Zuvor musste das Hinzufügen von dekorativen Elementen zu Webseiten (z. B. ausgefallene Grenzen) das Bild schneiden und den CSS -Code geduldig einstellen, bis der Effekt zufriedenstellend war.

CSS vereinfacht diesen Prozess jetzt. Nur ein paar Codezeilen, um Ihrer Website ziemlich komplexe Grenzen hinzuzufügen. Dieser Artikel zeigt Ihnen, wie das geht.

Schlüsselpunkte

• CSS ermöglicht das Hinzufügen komplexer Grenzen zu Webseiten mit nur wenigen Codezeilen, einschließlich des Hinzufügens von Hintergrundbildern am Rand mithilfe der border-image-source -Spertage.
• border-image-slice Eigenschaften wenden das ausgewählte Bild auf den Rand an und teilen Sie das Bild in neun Bereiche: vier Ecken, vier Seiten und einen mittleren Bereich. .
• border-image-width Eigenschaften Entwerfen Sie den internen Versatz innerhalb des Grenzbildbereichs, während die Eigenschaft border-image-outset ermöglicht, dass der Grenzbildbereich außerhalb des Grenzrahmens gedrückt wird.
• Sie können die Eigenschaft Abkürzung border verwenden, um die Eigenschaft border-image zurückzusetzen, die die Breite, Farbe und den Stil aller vier Grenzen eines Elements schnell zurücksetzt. Zum Zeitpunkt des Schreibens wird border-image in fast allen großen Browsern vollständig unterstützt.

Grenzbildeigenschaften

Eine gemeinsame Methode zur Festlegung von Grenzstilen besteht darin, voreingestellte border-style Regeln zu verwenden. Diese Regeln umfassen: dotted, dashed, solid, double, groove, ridge, inset, outset,

und

.

Diese Stile bieten bereits einige Optionen. Sie können jedoch noch einen Schritt weiter gehen und die folgenden CSS -Eigenschaften verwenden, um dem Rand ein attraktives Hintergrundbild hinzuzufügen. border-image-source

Attribute

element {
  border-image-source: url('myimage.png');
}

Verwenden Sie diese Eigenschaft, Sie können dem Rand eines Elements ein Hintergrundbild zuweisen. Dieser Wert ist normalerweise die URL des Bildes:

element {
  border-image-source: linear-gradient(10deg, #fe01f5 0%, #2e113d 100%);
}

Sie werden feststellen, dass der CSS -Gradienteneffekt genauso gut ist:

Im Browser sieht es so aus: none border-style Wenn Sie diese Eigenschaft auf einen border-style -Wertzwert festlegen oder das Bild nicht angezeigt werden kann, verwendet der Browser den Wert für die Eigenschaft

. Daher ist es am besten,

als Sicherungsplan zu verwenden.

Das von Ihnen verwendete Bild muss nicht mit der Breite und Höhe des Randes übereinstimmen. Das Schöne an CSS -Borderbildern ist, dass Sie nur ein kleines Bild benötigen, um Elementränder in jeder Breite und Höhe zu dekorieren, einschließlich Elementen, die sich an verschiedene Bildschirmgrößen anpassen. border-image-slice

Attribute border-image-source border-image-slice Nachdem Sie ein Bild mit der Eigenschaft

ausgewählt haben, können Sie die Eigenschaft <🎜> verwenden, um es auf den Rand anzuwenden. <🎜>

element {
  border-image-source: url('myimage.png');
}

Lassen Sie uns genauer erfahren. Dieses Immobiliendesign stammt aus den internen Offsets oben, rechts, unten und links. Diese Offsets schneiden Ihr kleines Bild schließlich in neun Bereiche: vier Ecken, vier Seiten und einen mittleren Bereich.

Sie können ein bis vier Zahlen oder Prozentwerte angeben. Wenn Sie vier Werte angeben, werden sie oben, rechts, unten und linke Offsets angewendet. Wenn Sie den linken Offset überspringen, entspricht dies dem rechten. Wenn Sie den unteren Offset verpasst haben, entspricht dies mit der Oberseite. Wenn Sie den Wert des Offsets nach rechts auslassen, wird es den gleichen wie der obere. Wenn Sie nur einen Wert verwenden, wird er für alle vier Offsets verwendet.

Der prozentuale Wert des prozentualen Werts bezieht sich auf den Prozentsatz der Bildgröße - die Bildbreite des horizontalen Versatzes und die Bildhöhe des vertikalen Versatzes.

Zahlen repräsentieren Pixel im Bild oder im Fall von Vektorbildern Koordinaten. Ein weiterer Punkt, füge nach der Nummer nicht

hinzu, das wird nicht funktionieren! px

Folgendes ist, wie Sie

: border-image-slice verwenden können

element {
  border-image-source: linear-gradient(10deg, #fe01f5 0%, #2e113d 100%);
}

element {
  border-image-slice: 19;
}

Verwenden Sie ein Bild mit einer Größe von 100 x 100 Pixel als Rand, und sein Aussehen ist wie folgt:

Der endgültige Effekt ist wie folgt:

Der mittlere Bereich erscheint vollständig transparent und ist daher unsichtbar. Wenn Sie es sichtbar machen möchten, fügen Sie das Schlüsselwort hinzu. fill

Zum Beispiel ist die Verwendung eines Bildes mit einem vollständig undurchsichtigen mittleren Bereich ohne Hinzufügen des Schlüsselworts

genau das gleiche wie das obige Beispiel. Bitte wenden Sie das Schlüsselwort fill wie folgt an: fill

<div class="box">
  Border Image
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
</div>

Verwenden Sie ein Bild, das Details im mittleren Bereich enthält:

Dann stellen wir fest, dass der mittlere Bereich des Bildes auf der Seite vollständig sichtbar ist, wenn auch ein wenig verschwommen und komprimiert:

Attribute border-image-width

Diese Eigenschaft wird im sogenannten Grenzbildbereich gezeichnet. Standardmäßig ist die Grenze dieses Bereichs die Grenze des Grenzboxs. Wie die Eigenschaft

entwirft border-image-slice interne Offsets, wodurch das Bild in neun Bereiche unterteilt wird. border-image-width

Diese Eigenschaft akzeptiert ein bis vier Werte (oben, rechts, unten, links) und kann Zahlen oder Prozentsätze verwenden. Der Prozentsatz ist relativ zur Größe des Grenzbildbereichs, d. H. Die Flächenbreite des horizontalen Versatzes und die Flächenhöhe des vertikalen Versatzes. Wenn Sie Zahlen ohne

Einheiten verwenden, entsprechen diese Zahlen vielfältig der entsprechenden berechneten Randbreite. Zum Beispiel der folgende Code: px

element {
  border-image-source: url('myimage.png');
}

… Stellen Sie die Breite des Grenzbildes auf das Drei -mal -mal den Wert der Randbreite, d. H. 19 Pixel. Die Ergebnisse sind wie folgt:

Ich habe festgestellt, dass die Zuordnung des gleichen Werts zu den Eigenschaften border-image-width und border-image-slice sicherstellt, dass Ihr Grenzbild ohne unerwünschte Verformung in der besten Bedingung angezeigt wird.

border-image-outset Attribute

Alle Eigenschaften, die ich bisher verwendet habe, haben sich standardmäßig mit dem eingebetteten Grenzbildbereich befasst. Sie können sich jedoch dafür entscheiden, den Grenzbildbereich außerhalb des Grenzbockens zu schieben. Sie können das Attribut border-image-outset verwenden, um es zu implementieren.

Diese Eigenschaft nimmt ein bis vier Werte (oben, rechts, unten, links) und wird in Zahlen oder Längeneinheiten ausgedrückt (z. B. px, em usw.). Wenn Sie Zahlen verwenden, wird das Ergebnis sein, dass das Grenzbild außerhalb des Grenzboxs gedrückt wird, wobei Vielfache die berechnete Randbreite sind.

Um weiter zu veranschaulichen, habe ich einen grün gepunkteten Umriss gezeichnet, um die Grenze darzustellen. Der Grenzbildbereich enthält ein rosa Randbild. In seinem standardmäßigen eingebetteten Zustand befindet sich das Grenzbild innerhalb des grünen Umrisss. Dies bedeutet, dass sich der Grenzbildbereich innerhalb des Grenzrahmens befindet.

Hinzufügen von border-image-outset: 19px; zum CSS -Regelsatz drückt das rosa Grenzebild über den gepunkteten grünen Umriss hinaus. Dies bedeutet, dass der Grenzbildbereich außerhalb des Randes gezeichnet wird:

Bitte beachten Sie, dass das Grenzbildteil außerhalb des Grenzboxs weder das Scrollen auslöst noch das Mausereignis erfasst wird.

border-image-repeat Attribute

Diese Eigenschaft bietet einige Möglichkeiten darüber, wie Bildscheiben an den Seiten und mittleren Abschnitten des Randes skalieren und Kachelscheiben skalieren. Der erste Wert wird auf die horizontale Seite (oben und unten) angewendet und der zweite Wert wird auf die vertikale Seite (rechts und links) angewendet. Wenn Sie nur einen Wert festlegen, wird der Wert sowohl auf horizontale als auch auf vertikale Seiten angewendet.

verfügbare Werte umfassen:

• stretch - Wenn Sie das Attribut border-image-repeat nicht verwenden, ist dies der Standardwert. Dieses Keyword erweitert das Bild, um den verfügbaren Bereich zu füllen.
• repeat - Bildfassungen Wiederholungen, um den verfügbaren Bereich zu füllen. Wenn der verfügbare Bereich durch die gekachelte Breite nicht teilbar sein kann, kann das Bild abgeschnitten werden.
• round - Wie repeat, aber wenn der Raum nicht ausreicht, um Fliesen aufzunehmen, sind die Fliesen skaliert, bis sie alle passen. Dies stellt sicher, dass die Fliesen niemals abgeschnitten werden, aber das Bild kann etwas komprimiert aussehen.
• space - Wie repeat, aber wenn der Raum kein genaues Vielfalt der Fliesenbreite ist, wird der zusätzliche Weißraum gleichmäßig um jede Fliese verteilt.

nach diesem Schreiben scheint Firefox space so zu rendern wie stretch, während Chrome space als repeat rendert.

border-image Abkürzungsattribute

Sie können alle oben diskutierten einzelnen Eigenschaften in border-image Abkürzungseigenschaften wie folgt komprimieren:

1. border-image-source
2. border-image-slice
3. border-image-width
4. border-image-outset
5. border-image-repeat

Folgendes ist ein Code -Snippet:

element {
  border-image-source: url('myimage.png');
}

Was soll ich tun, wenn ich das Grenzbild löschen möchte?

Der beste Weg, um die Grenze zurückzusetzen, besteht darin, das Attribut der Abkürzung border zu verwenden. Mit border können Sie schnell die gleiche Breite, Farbe und denselben Stil aller vier Grenzen eines Elements zurücksetzen. Es ist nicht erforderlich, eine border-image: none -Regel anzugeben, noch müssen Sie ein einzelnes border-image -Treizattribut überschreiben.

Browserunterstützung

zum Zeitpunkt des Schreibens wird border-image in fast allen wichtigen Browsern vollständig unterstützt. Nur Firefox kann SVG -Bilder nicht über Elemente hinweg ausdehnen, Opera Mini unterstützt die Abkürzungssyntax mit dem Präfix -o-, unterstützt jedoch kein einziges Attribut.

Schlussfolgerung

Dieser Artikel führt hauptsächlich die border-image -attribute vor: die von ihm akzeptierten Werte, die beste Art und Weise zu verwenden und die Browser -Support -Ebene zum Zeitpunkt des Schreibens.

Sie finden weitere Details im CSS -Hintergrund und in der Spezifikationsdokumentation der Randebene 3.

Wenn Sie das Attribut border-image in Ihrem Projekt verwenden, warum nicht das Endergebnis mit der Community teilen?

Ich freue mich auf Ihre Antwort!

FAQs (FAQ) zum Dekorieren von Webseiten mit CSS -Borderbildern

Wie erstellt man CSS -Grenzbilder?

Erstellen eines CSS -Randbildes beinhaltet die Verwendung des border-image -attributs. Mit dieser Eigenschaft können Sie ein Bild angeben, das als Rand um das Element verwendet wird. Die Syntax dieser Eigenschaft lautet wie folgt:

element {
  border-image-source: url('myimage.png');
}

source ist die URL des Bildes, die Sie verwenden möchten. slice definiert den inneren Offset des Bildes. width setzt die Breite der Grenze. outset bestimmt den Abstand vom Grenzbildbereich jenseits der Grenze. repeat Gibt an, wie das Bild gekippt oder wiederholt wird.

Was sind die verschiedenen Grenzstile in CSS?

CSS bietet mehrere Grenzstile, mit denen Sie das Erscheinungsbild von Webelementen anpassen können. Dazu gehören: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, dotted, double ,

und

. Jeder Stil erzeugt einen anderen visuellen Effekt. Zum Beispiel erstellt

eine Grenze zu einer Reihe von Punkten, während

einen Doppelzeilenrand erstellt. inset

Wie erstellt man eingebettete Grenzen mit CSS?

element {
  border-image-source: linear-gradient(10deg, #fe01f5 0%, #2e113d 100%);
}

Inline -Grenzen können in CSS mit dem Grenzstil

erstellt werden. Dieser Stil lässt die Box so aussehen, als wäre sie in die Seite eingebettet. Die Syntax ist wie folgt:

border-top-style border-right-style Kann ich verschiedene Grenzstile für verschiedene Seiten eines Elements verwenden? border-bottom-style border-left-style Ja, CSS können Sie verschiedene Grenzstile auf verschiedene Seiten eines Elements anwenden. Sie können die Stile auf jeder Seite mithilfe der Eigenschaften

,

,

und

angeben. border-image-width

Wie kann man die Größe des CSS -Randbildes steuern?

Die Eigenschaft

kann verwendet werden, um die Größe des CSS -Grenzbildes zu steuern. Diese Eigenschaft legt die Breite des Grenzbildes fest, indem die Größe des Grenzbereichs definiert wird. Sie können eine Breite in Pixeln oder als Prozentsatz des Elementbox angeben. linear-gradient border-image Kann ich Gradientenbilder als Grenzen in CSS verwenden?

Ja, CSS können Sie Gradientenbilder als Grenzen verwenden. Sie können ein Gradientenbild mit der Funktion

erstellen und es dann als Randbild mit der Eigenschaft

verwenden. border-image-repeat stretch Wie kann ich mein CSS -Grenzbild wiederholen? repeat round Das Attribut space in CSS steuert, wie Randbilder wiederholt werden. Mögliche Werte sind stretch (Standard), repeat, round und space.

skalieren Sie das Bild, um den Bereich zu füllen.

Fliesenbild. border fliesen das Bild, aber skalieren Sie es so, dass sie genau übereinstimmen. border-image fliesen das Bild, aber lassen Sie Platz zwischen den Kacheln.

Was ist der Unterschied zwischen dem Attribut

und dem border -attribut in border-image css?

<🎜> Das Attribut <🎜> in CSS wird verwendet, um den Stil, die Breite und die Farbe des Elementrandes festzulegen. Andererseits ermöglicht die <🎜> -Mobilie, ein Bild als Rand um ein Element zu verwenden. <🎜>

Kann ich CSS -Borderbilder mit abgerundeten Ecken verwenden?

Ja, Sie können CSS -Borderbilder mit abgerundeten Ecken verwenden. Sie können abgerundete Ecken mit der Eigenschaft border-radius erstellen und dann das Grenzbild mit der Eigenschaft border-image anwenden.

Wie erstellt man einen gepunkteten Rand in CSS?

gestrichelte Grenzen können in CSS unter Verwendung des Grenzstils dashed erstellt werden. Die Syntax ist wie folgt:

element {
  border-image-source: url('myimage.png');
}

Dies erzeugt eine Grenze mit Reihe von kurzen Linien oder gepunkteten Linien.

Das obige ist der detaillierte Inhalt vonDekorieren des Netzes mit CSS -Randbildern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!