Border-image-generator

Dette værktøj genererer CSS `border-image`-deklarationer fra fire indgange: kilde, skive, bredde, udgangspunkt og genværdigingsmodus. Kilden accepterer ethvert gyldigt `border-image-source`-værdi, som `url(border.png)` eller enhver CSS-gradient. En live-preview-box viser resultatet på en `20px solid transparent`-ramme, og udgangen vises både som kortform og som fuldkomne egenskaber.

1. Sæt Kilde til en gradient eller `url(...)`. Standardværdien er `linear-gradient(45deg, #f3ec78, #af4261)`. 2. Sæt Slice (standardværdi `1`), Width (standardværdi `20px`) og Outset (standardværdi `0`). 3. Vælg en Genvægsmode: stretch, repeat, round eller space. 4. Forhandsvisningen opdateres i realtid. 5. Klik på Kopier for at kopiere hele CSS-blokket, eller Download for at gemme det som `border-image.css`.

Sendt skratchformål: `border-image: <source> <slice> / <width> / <outset> <repeat>;`. Den fulde blokken listar desuden `border-image-source`, `-slice`, `-width`, `-outset`, `-repeat` hver for sig og inkluderer den nødvendige `border: 20px solid transparent;`-basenivå. Genværgemål: `stretch` (standard, skalerer siderne), `repeat` (fliser uden skalering), `round` (fliser og strekker sig for at passe hele fliserne), `space` (fliser med distribueret ekstra rum).