Ramkärningsgenerator

Detta verktyg genererar CSS `border-image`-deklarationer från fem inmatningar: source, slice, width, outset och repeat-läge. Source accepterar alla giltiga `border-image-source`-värden som `url(border.png)` eller vilken CSS-gradient som helst. En live förhandsgranskningsruta renderar resultatet på en `20px solid transparent`-ram, och utdata visas både som förkortningen och som de långskrivna egenskaperna.

1. Ställ in source till en gradient eller `url(...)`. Standard är `linear-gradient(45deg, #f3ec78, #af4261)`. 2. Ställ in Slice (standard `1`), Width (standard `20px`) och Outset (standard `0`). 3. Välj ett repeat-läge: stretch, repeat, round eller space. 4. Förhandsgranskningen uppdateras live. 5. Klicka på Kopiera för att kopiera hela CSS-blocket, eller Ladda ner för att spara det som `border-image.css`.

Förkortning som avges: `border-image: <source> <slice> / <width> / <outset> <repeat>;`. Det fulla blocket listar också `border-image-source`, `-slice`, `-width`, `-outset`, `-repeat` individuellt och inkluderar den obligatoriska `border: 20px solid transparent;`-baslinjen. Repeat-lägen: `stretch` (standard, skalar sidorna), `repeat` (plattar utan skalning), `round` (plattar och sträcker för att passa hela plattor), `space` (plattar med extra utrymme distribuerat).