Reunakuvageneraattori

Tämä työkalu generoi CSS `border-image` -deklaraatioita viidestä syötteestä: lähde, viipale, leveys, uloke ja toistotila. Lähde hyväksyy minkä tahansa validin `border-image-source` -arvon kuten `url(border.png)` tai minkä tahansa CSS-gradientin. Live-esikatselulaatikko renderöi tuloksen `20px solid transparent` reunalla, ja tuloste näytetään sekä lyhenteenä että pitkässä muodossa.

1. Aseta Source gradientiksi tai `url(...)`. Oletus on `linear-gradient(45deg, #f3ec78, #af4261)`. 2. Aseta Slice (oletus `1`), Width (oletus `20px`) ja Outset (oletus `0`). 3. Valitse toistotila: stretch, repeat, round tai space. 4. Esikatselu päivittyy live-aikana. 5. Napsauta Copy kopioidaksesi koko CSS-lohkon, tai Download tallentaaksesi sen nimellä `border-image.css`.

Lyhente tuotettu: `border-image: <source> <slice> / <width> / <outset> <repeat>;`. Koko lohko listaa myös `border-image-source`, `-slice`, `-width`, `-outset`, `-repeat` erikseen ja sisältää vaaditun `border: 20px solid transparent;` perustan. Toistotilat: `stretch` (oletus, skaalaa sivut), `repeat` (laattoit ilman skaalausta), `round` (laattoit ja venyttää sopimaan kokonaisia laattoja), `space` (laattoit ylimääräisellä tilalla jakautuneena).