CSS

HTML

COMPONENTS

CODE HUB

CSS Border Image Generator

Konfiguráció

Kép URL

Offset

Ismétlés

Hatótávolság

Szélesség

Osztály

Előnézet

Kód

ReadyTools Academy

Tanulj HTML-t, CSS-t és JavaScriptet teljesen ingyen a ReadyTools Academy keretében.

Kövesd a tanulásodat, fejlődj a saját tempódban, és szórakozz közben! 🎯

Kezdj bele

CSS Border Image Generator

A CSS-ben a border-image tulajdonságot egy HTML-elem szegélyeként használandó kép megadására használják a hagyományos szegélytulajdonságok, például a border-width, border-style és border-color használata helyett. Ez a tulajdonság a CSS Border Image modul része.

A border-image tulajdonság egy kép URL-címét, valamint a szegélyszeletelés, a szegélyszélesség és egyéb tulajdonságok opcionális értékeit fogadja el. Íme az alapvető szintaxis:

border-image: source slice width outset repeat;
  • source: Megadja a keretként használt kép URL-címét vagy hivatkozását.
  • slice: Meghatározza, hogy a képet kilenc régióra szeleteljük, hasonlóan a tic-tac-toe rácshoz. Ez a tulajdonság határozza meg, hogy a kép melyik része kerüljön felhasználásra az egyes szegmensszegmensekhez.
  • width: A szegélyszegmensek szélességét állítja be (mint a border-width).
  • outset: A szegélyszegmensek rajzolásának módja az elem dobozán kívül.
  • repeat: Meghatározza, hogy a kép hogyan kerül csempézésre vagy ismétlésre a szegélyterület kitöltéséhez.

Íme egy egyszerűsített példa a border-image tulajdonság használatával:

.border-image-element { border-image: url('border-image.png') 27 round; border-width: 10px; }

Ebben a példában:

  • A .border-image-element osztály egy keretképet alkalmaz az elemre.
  • url('border-image.png') megadja a képet, amelyet a keretként használni kell.
  • 27 meghatározza a határkép kilenc régióra történő felszeletelését.
  • A round azt határozza meg, hogy a szegélyszegmenseket meg kell ismételni a szegélyterület kitöltéséhez.
  • border-width: 10px beállítja a szegmensek szélességét.

A border-image tulajdonság lehetővé teszi a kreatív és dekoratív szegélyek kialakítását képek segítségével. Gyakran használják vizuálisan vonzó és egyedi elemek létrehozására egy weboldalon.