Ta članek bo prikazal postopek za uporabo lebdenja z okrasjem polja v Tailwindu.
Kako uporabiti lebdenje na prelomu dekoracije škatle v zadnjem vetru?
Lastnost CSS »box-decoration-break« določa upodabljanje ozadja, obrobe in oblazinjenja za element, ko se razteza čez več vrstic ali stolpcev. Če želite uporabiti učinek lebdenja na prelomnih elementih dekoracije škatle, morate uporabiti ' lebdeti ” in na elemente uporabi kakršen koli učinek.
Oglejte si spodnje korake za praktično predstavitev:
1. korak: Uporabite lastnost lebdenja na prelomu dekoracije polja v programu HTML
Ustvarite program HTML in uporabite katero koli lastnost lebdenja na elementih preloma dekoracije polja. Na primer, uporabili smo ' hover:box-decoration-clone ' na elementu 'box decoration-slice' in ' hover:text-yellow-500 ” lastnost elementa “box-decoration-clone”:
< telo >
< razpon razred = 'box-decoration-slice hover:box-decoration-clone bg-teal-600 text-white text-3xl px-2' >
Linux < št / >
Namig
< / razpon >
< št >
< št >
< razpon razred = 'box-decoration-clone hover:text-yellow-500 bg-teal-600 text-white text-3xl px-2' >
Linux < št / >
Namig
< / razpon >
< / telo >
Tukaj:
- ' hover:box-decoration-clone « uporabi učinek »box-decoration-clone«, ko se nad element »box decoration-slice« premakne.
- ' hover:text-yellow-500 « spremeni barvo besedila v rumeno, ko premaknete miškin kazalec nad element »box-decoration-clone«.
2. korak: Preverite izhod
Zaženite program HTML, da preverite izpis:
Zgornji rezultat kaže, da je bil učinek lebdenja uporabljen za elemente, glede na katere je bil določen.
Zaključek
Tailwind CSS ponuja zbirko uporabnih razredov za uporabo učinkov lebdenja na kateri koli element. Če želite premakniti kazalec na elemente preloma dekoracije škatle, uporabite » lebdeti ” in določite učinek v programu HTML. Uporabniki lahko spremenijo barvo ozadja, barvo besedila in barvo obrobe ali dodajo senco elementu, ko lebdijo. V tem članku je razložen postopek za uporabo lebdenja z okrasjem polja v Tailwindu.