Ausführliche Erläuterung der Anwendungsbeispiele des CSS3-Bildrahmens border-image

Unter den vielen neuen Funktionen, die in CSS3 eingeführt wurden, stellt dieser Artikel hauptsächlich die Verwendung von CSS3BildBorder-Image vor, das einen gewissen Referenzwert hat. Interessierte können sich darüber informieren

Ich glaube, dass alle WEB-Entwickler mit der CSS-Attributgrenze bestens 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 Ich denke, das liegt vor allem daran, dass Google Chrome und Firefox sie schon seit langem unterstützen IE11 unterstützt sie nur.

Die Syntax von border-image

Der Code lautet wie folgt:

<&#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 gut aus Es ist langweilig. Jeder sieht gerne Beispiele, die am einfachsten zu verstehen sind.

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

In diesem Fall werden die Randbildbilder der Reihe nach gekachelt und gefüllt Grenzgebiet.

<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;
}

Beispieldemonstration1:

Bildrand border-image Verwendung 2: Randbild-Adaptive-Loop-Kachel (rund)

Sie haben vielleicht gesehen, dass der Bildrand oben zwar sehr schön ist, aber einen Fehler aufweist, nämlich wenn die Breite oder Höhe des Elements kein ganzzahliges Vielfaches des Randes ist Bild, das letzte/te Ein Bild kann nicht vollständig angezeigt werden und wird teilweise blockiert, 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: Randbild strecken und kacheln (strecken)

„Strecken“ bedeutet Strecken, wodurch das kleine Bild gestreckt wird, um den Randbereich ohne Schleifen auszufüllen. Offensichtlich wird das Randbild verformt.

<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

Natürlich border-image Die erste Verwendung sollte ungewöhnlich sein, da es manchmal zu Grenzen kommt. Es besteht ein Gefühl von Unvollständigkeit. 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 detaillierte Inhalt vonAusführliche Erläuterung der Anwendungsbeispiele des CSS3-Bildrahmens border-image. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!