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!