So verwenden Sie border-image, um Beispielcode für Textblasenränder zu implementieren

Während der Entwicklungstätigkeit bin ich auf einen sehr einfachen Textblaseneffekt gestoßen, der ungefähr so ​​aussieht.

Ähm, es sieht einfach aus. Die Umsetzungsidee ist wie folgt

• Der Hauptteil ist ein Div, fügen Sie einfach Farbverlauf, Rahmen und abgerundete Ecken hinzu.
• Der Barren schneidet das Bild links und verwendet ::before, um es links zu positionieren.
• Die Maus schneidet das Bild auf der rechten Seite aus und positioniert es mit ::after auf der rechten Seite.

Es ist grundsätzlich nicht schwierig und in wenigen Minuten erledigt. bis...

Produkt: Ach ja, dieses Bubble Chart wird später im Hintergrund konfigurierbar gemacht. Dann können wir einfach das Bild hochladen, das dann als persönliche Signatur des Benutzers gilt. ICH:! ! ! (╯‵□′)╯︵┻━┻

Das ist etwas peinlich. Man kann nicht ein Vorher-Bild und ein Nachher-Bild von dem Produkt haben und dazwischen selbst den Farbverlauf schreiben. Ich schätze, ich werde jeden Moment zu Tode gehackt.

In meinen ersten Jahren bei der Arbeit hörte ich einen Android-Kollegen über etwas namens .9png sprechen und suchte daher online, ob das Frontend einen ähnlichen Effekt erzielen könnte. Und tatsächlich, ich habe es gefunden.

.9png

Was ist .9png? .9png ist ein Bildformat unter Android, das speziell für Blaseneffekte verwendet wird. Seine Besonderheit besteht darin, dass es ein Bild in 9 Teile unterteilt und die vier Eckbereiche nicht gestreckt werden. Es wird nur der Mittelteil gedehnt.

Auf diese Weise werden die in den Ecken verbleibenden Elemente nicht verformt, selbst wenn sich Ihr Inhaltsbereich erweitert.

Frontend-Implementierung

Kluge Schüler können direkt hier klicken, um den Effekt zu sehen https://codepen.io/gong12339/pen/PowxmzL

Die folgenden Attribute werden benötigt, um .9png auf dem Front-End zu implementieren.

Die offiziell empfohlene .9png-Bildauflösung beträgt 81 * 81, sodass jeder der 9 ausgeschnittenen Bereiche 27 * 27 in Breite und Höhe ist. Da mein Stück ein Rechteck ist, muss ich die Position der Scheiben selbst messen. Und mein Bild unterstützt offensichtlich keine vertikale Streckung

.Grenze {
  Rahmenbreite: 18px 44px 25px 28px;
  Rahmenstil: durchgezogen;
  Rahmenbildquelle:URL (https://raw.githubusercontent.com/gong12339/vic-blog/master/static/img/border.9.png);
  Rahmenbild-Slice: 25 44 25 28 füllen;
  Bildrahmenbreite: 25px 44px 25px 28px;
}

• border-width: 27px; Rahmenbreite festlegen
• border-style: solid; Legen Sie den Rahmentyp fest
• Rahmenbildquelle: URL('a.png')
• Stellen Sie die Bildadresse ein, nichts zu sagen
• Rahmenbild-Ausschnitt: 27 27 27 27;
• Legen Sie die Slice-Position fest (oben, rechts, unten, links). Wenn sie alle gleich sind, können Sie einfach eine schreiben.
• Rahmenbildbreite: 27px 27px 27px 27px;
• Legen Sie die Rahmenbreite fest (oben, rechts, unten, links). Wenn alle gleich sind, können Sie einfach einen schreiben

Hier konzentrieren wir uns auf border-image-slice , was bedeutet, dass wir im entsprechenden Abstand von der oberen, rechten, unteren und linken Seite des Bildes eine Linie zeichnen und das Bild dann in 9 Bereiche aufteilen (beachten Sie, dass Einheiten nicht eingeschlossen werden können).

An diesem Punkt haben wir die Konfiguration im Wesentlichen abgeschlossen

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.