Ako použiť prestávku na dekoráciu boxu v Tailwinde?

V tomto článku sa ukáže postup použitia umiestňovania s dekoráciou poľa v Tailwinde.

Ako použiť prestávku na dekoráciu boxu v Tailwinde?

Vlastnosť CSS „box-decoration-break“ určuje vykreslenie pozadia, okraja a výplne pre prvok, keď sa rozprestiera na viacerých riadkoch alebo stĺpcoch. Ak chcete použiť efekt vznášania na prvky prerušenia dekorácie krabice, je potrebné použiť „ vznášať sa ” a aplikovať na prvky akýkoľvek efekt.

Pre praktickú ukážku si pozrite nižšie uvedené kroky:

Krok 1: Použite Hover Property na Box Decoration Break v HTML programe

Vytvorte HTML program a využite akúkoľvek vlastnosť vznášania na prvkoch prerušenia dekorácie boxu. Napríklad sme použili „ hover:box-decoration-clone vlastnosť ” na elemente “box decoration-slice” a “ visieť:text-žltý-500 vlastnosť ” na elemente „box-decoration-clone“:

Tu:

• ' hover:box-decoration-clone ” použije efekt „box-decoration-clone“, keď umiestnite kurzor myši nad prvok „box-decoration-slice“.
• ' visieť:text-žltý-500 ” zmení farbu textu na žltú, keď umiestnite kurzor myši nad prvok „box-decoration-clone“.

Krok 2: Overte výstup

Spustite program HTML na overenie výstupu:

Vyššie uvedený výstup ukazuje, že efekt vznášania bol aplikovaný na prvky, podľa ktorých bol špecifikovaný.

Záver

Tailwind CSS ponúka kolekciu pomocných tried na aplikovanie efektov vznášania sa na ľubovoľný prvok. Ak chcete umiestniť kurzor myši na prvky prerušenia dekorácie krabice, použite „ vznášať sa ” a špecifikujte efekt v programe HTML. Používatelia môžu zmeniť farbu pozadia, farbu textu a farbu orámovania alebo pridať tieň k prvku pri umiestnení kurzora myši. V tomto článku je vysvetlený postup aplikácie umiestňovania kurzora pomocou dekorácie poľa v systéme Tailwind.