Informationen zur Verwendung des CSS3-Bildrandes border-image

Unter den vielen neuen Funktionen, die in CSS3 eingeführt wurden, stellt dieser Artikel hauptsächlich die Verwendung des CSS3-Bildrahmens border-image vor, der einen bestimmten Referenzwert hat. Interessierte können sich über

über das CSS-Attribut border informieren Ich glaube, dass alle WEB-Entwickler damit sehr vertraut sind. Wir können die Breite, Farbe und den Stil des Rahmens des HTML-Elements festlegen, damit das HTML-Element unterschiedliche Ränder anzeigt, z. B. Doppellinien, gepunktete Linien und gepunktete Linien. Aber egal, wie Sie es einrichten, es handelt sich hierbei um ziemlich primitive Praktiken. Ab CSS3 haben wir eine neue Eigenschaft: border-image , mit der Sie HTML-Elemente mit schönen kleinen Bildern umgeben können, die als Bildränder erscheinen. Mit der Eigenschaft border-image können wir sehr schöne Rahmenstile erstellen.

Unter den vielen neuen Funktionen, die in CSS3 eingeführt wurden, wie z. B. neue Eingabetypen in HTML5, chinesische Schriftarten (Web-Schriftarten), Platzhalter usw., sind sie sehr praktisch und beliebt, und wir haben auch eine sehr schöne zitiert eins vor Beispiele für Border-Image, aber ich denke, es gibt immer noch sehr wenige Border-Image-Bilder im Internet, weil Google Chrome und Firefox sie schon seit langem unterstützen und IE11 nur diese Syntax unterstützt.

Die Syntax von border-image

<&#39;border-image-source&#39;> || <&#39;border-image-slice&#39;> [ / <&#39;border-image-width&#39;> | / <&#39;border-image-width&#39;>? / <&#39;border-image-outset&#39;> ]? || <&#39;border-image-repeat&#39;>

Diese Syntaxbeschreibungen sehen sehr langweilig aus, jeder sieht gerne Beispiele, also ist dies das Beste, was es gibt leicht zu verstehen, nehmen wir unten ein paar Beispiele.

Bildrand border-image Verwendung 1: Zyklisches Kacheln des Randbildes (Wiederholung)

In diesem Fall wird das Randbild der Reihe nach gekachelt und der Randbereich gefüllt.

<p id="repeat">图片将会循环贴满边框区域</p>

#repeat { 
  border: 15px solid transparent;
  padding: 10px 20px;
  -moz-border-image:url("/files/4127/border.png") 30 30 repeat; /* Old Firefox */
  -webkit-border-image:url("/files/4127/border.png") 30 30 repeat; /* Safari */
  -o-border-image:url("/files/4127/border.png") 30 30 repeat; /* Opera */
  border-image:url("/files/4127/border.png") 30 30 repeat;
}

Beispiel 1:

Bildrand border-image Verwendung 2: Adaptive kreisförmige Kachelung von Randbildern (rund)

Sie haben vielleicht gesehen, dass der Bildrand oben zwar sehr schön ist, aber einen Fehler aufweist, nämlich wenn der Elementbreite Oder wenn die Höhe kein ganzzahliges Vielfaches des Rahmenbildes ist, kann das letzte/erste Bild nicht vollständig angezeigt werden und wird teilweise verdeckt, was sehr unansehnlich aussieht. Die Designer von CSS3 haben dieses Problem bereits berücksichtigt, und die Verwendung des runden Attributwerts kann diese Situation vermeiden. Die Funktion von „Rund“ besteht darin, das Randbild leicht anzupassen, um sicherzustellen, dass jedes Bild angezeigt werden kann, was das Sehvergnügen erhöht.

<p id="round">图片将会贴满边框区域</p>

#round { 
  border: 15px solid transparent;
  padding: 10px 20px;
  -moz-border-image:url("/files/4127/border.png") 30 30 round; /* Old Firefox */
  -webkit-border-image:url("/files/4127/border.png") 30 30 round; /* Safari */
  -o-border-image:url("/files/4127/border.png") 30 30 round; /* Opera */
  border-image:url("/files/4127/border.png") 30 30 round;
}

Beispieldemonstration 2

Bildrand border-image Verwendung 3: Strecken und kacheln Sie das Randbild (Strecken)

„Strecken“ bedeutet Strecken, wodurch das kleine Bild gestreckt wird, um den Randbereich ohne Schleifen auszufüllen, also natürlich den Rahmen Das Bild wird deformiert.

<p id="stretch">图片将会拉伸贴满边框区域.</p>

#stretch { 
  border: 15px solid transparent;
  padding: 10px 20px;
  -moz-border-image:url("/files/4127/border.png") 30 30 stretch; /* Old Firefox */
  -webkit-border-image:url("/files/4127/border.png") 30 30 stretch; /* Safari */
  -o-border-image:url("/files/4127/border.png") 30 30 stretch; /* Opera */
  border-image:url("/files/4127/border.png") 30 30 stretch;
}

Beispieldemonstration 3

Offensichtlich border-image Die erste Verwendung sollte ungewöhnlich sein, da sich der Rand dadurch manchmal unvollständig anfühlt. Die zweite und dritte Verwendung haben ihre eigenen Vorzüge und sind unterschiedlich schön. Das hier verwendete Randbild ist eigentlich sehr einfach. Mit exquisiter Kunst können schönere Randbilder entstehen und erstaunliche Effekte erzielt werden, wie ich es Ihnen weiter unten noch einmal zeigen werde.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Verwenden Sie den Randradius von CSS3, um Tai Chi- und Liebesmuster zu zeichnen

@keyframes in CSS3-Implementierung von Animationen

Über die Methode der responsiven zentrierten Anzeige von CSS-Bannerbildern

Das obige ist der detaillierte Inhalt vonInformationen zur Verwendung des CSS3-Bildrandes border-image. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!