CSS Border Image Generator BÉTA

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:

• 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:

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.