Randbildgenerator

Dieses Tool generiert CSS-`border-image`-Deklarationen aus fünf Eingaben: Quelle, Slice, Breite, Outset und Wiederholungsmodus. Die Quelle akzeptiert jeden gültigen `border-image-source`-Wert wie `url(border.png)` oder jeden CSS-Gradienten. Eine Livevorschau-Box rendert das Ergebnis auf einem `20px solid transparent`-Rahmen, und die Ausgabe wird sowohl als Kurzschreibweise als auch als Langschreibweise angezeigt.

1. Setzen Sie Quelle auf einen Gradienten oder `url(...)`. Standard ist `linear-gradient(45deg, #f3ec78, #af4261)`. 2. Stellen Sie Slice (Standard `1`), Breite (Standard `20px`) und Outset (Standard `0`) ein. 3. Wählen Sie einen Wiederholungsmodus: stretch, repeat, round oder space. 4. Die Vorschau wird live aktualisiert. 5. Klicken Sie auf Kopieren, um den vollständigen CSS-Block zu kopieren, oder auf Download, um als `border-image.css` zu speichern.

Kurzschreibweise: `border-image: <source> <slice> / <width> / <outset> <repeat>;`. Der vollständige Block listet auch `border-image-source`, `-slice`, `-width`, `-outset`, `-repeat` einzeln auf und enthält die erforderliche `border: 20px solid transparent;`-Basis. Wiederholungsmodi: `stretch` (Standard, skaliert die Seiten), `repeat` (kacheln ohne Skalierung), `round` (kacheln und streckt, damit ganze Kacheln passen), `space` (kacheln mit verteiltem Zusatzraum).