Detaillierte Einführung in das Border-Image-Attribut in CSS3

Wir wissen, dass die ursprüngliche Absicht der Verwendung des Attributs „border-image“ darin besteht, komplexe Arbeiten zu vereinfachen. Wenn Sie dieses Attribut beherrschen, werden Sie feststellen, dass Sie beim Programmieren viel Zeit und Effizienz sparen. Als Nächstes werde ich Ihnen beibringen, wie Sie border-image verwenden.

Der Elementrand ist unregelmäßig. Zu diesem Zeitpunkt müssen Sie die Designzeichnung als Randhintergrund verwenden. Im Vergleich zu Hintergrundbild bietet Randbild den Vorteil, dass Sie die Dehnung und Wiederholung von Code steuern können den Randhintergrund, damit Sie vielfältigere Effekte erzeugen können

Die Breite und Höhe der Schaltfläche ist ungewiss. Verwenden Sie border-image, um Schaltflächen zu erstellen. Sie können dasselbe Hintergrundbild verwenden, um Schaltflächen unterschiedlicher Breite und Höhe zu erstellen.

Randbild-Attributanalyse

RandhintergrundBild. Das Format ist: URL("...").

border-image-slice

Der Abstand, um den der Bildrand nach innen versetzt wird. Format: border-image-slice: oben rechts unten links. Beziehen Sie sich jeweils auf den Abstand zwischen den vier Linien, die das Hintergrundbild von oben, rechts, unten und links schneiden.

Der Abstand akzeptiert numerische Werte und Prozentsätze. Die Standardwerteinheit ist px, aber px kann nicht nach dem Wert hinzugefügt werden, da dieses CSS sonst nicht vom Browser analysiert wird. Die Verwendung ähnelt margin und padding. Hier verwenden wir als Beispiele Zahlenwerte, das Gleiche gilt auch für Prozentangaben.

border-image-slice: 10; /*Der Abstand beträgt 10 Pixel nach oben und unten, links und rechts;*/

border-image-slice: 10 30 /*Der Abstand beträgt 10 Pixel nach oben und unten, 30 Pixel nach links und rechts;* /

border-image-slice: 10 30 20; /*Der Abstand beträgt 10 Pixel nach oben, 20 Pixel nach unten und 30 Pixel nach links und rechts;*/

border-image-slice: 10 30 20 40; /* Der Abstand beträgt 10 Pixel nach oben, 30 Pixel nach rechts, 20 Pixel nach unten und 40 Pixel nach links;*/

Die vier Linien teilen das Hintergrundbild in 9 Teile , darunter 1, 2, 3, 4, 6, 7, 8, 9 Acht Bereiche werden ausgeschnitten und als Bildrand verwendet. Wenn zusätzlich zum Festlegen des Werts oder Prozentsatzes eine „Füllung“ hinzugefügt wird, dann Bereich 5 wird als Hintergrund zum Füllen des Elementinhalts verwendet, z. B.:

border-image -slice: 25 11 fill;

Hinweis: Slice akzeptiert keine negativen Werte, wenn die Summe von Der vom Slice geschnittene linke und rechte Abstand ist größer als die Breite des Hintergrundbilds. Der obere und untere Rand werden nicht angezeigt. Wenn die Summe der oberen und unteren Abstände des Slice größer ist als die Höhe des Hintergrundbilds, werden der linke und rechte Rand nicht angezeigt.

border-image-width

Die Breite des Bildrandes. Es werden nur numerische Werte akzeptiert und Einheiten können nicht hinzugefügt werden.

Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

So erstellen Sie Feuerwerkspartikeleffekte mit H5

Schritte zur Implementierung der Optimierung und Komprimierung von HTML-Webseiten

Entwicklungserfahrung mit H-Tags in Webseiten

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in das Border-Image-Attribut in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!