Ovaj će članak pokazati postupak za primjenu lebdenja s ukrasom okvira u Tailwindu.
Kako primijeniti lebdenje na prekidu ukrasa kutije u stražnjem vjetru?
CSS svojstvo “box-decoration-break” određuje prikazivanje pozadine, obruba i ispune za element kada se proteže kroz više redaka ili stupaca. Za primjenu efekta lebdenja na elementima prijeloma ukrasa kutije, potrebno je koristiti ' lebdjeti ” i primijeniti bilo koji učinak na elemente.
Pogledajte dolje navedene korake za praktičnu demonstraciju:
Korak 1: Upotrijebite svojstvo lebdenja na prijelomu ukrasa okvira u HTML programu
Izradite HTML program i upotrijebite bilo koje svojstvo lebdenja na elementima prijeloma ukrasa okvira. Na primjer, primijenili smo ' hover:box-decoration-clone ' na elementu 'box decoration-slice' i ' lebdi:text-yellow-500 ” na elementu “box-decoration-clone”:
< tijelo >
< raspon razreda = 'box-decoration-slice hover:box-decoration-clone bg-teal-600 text-white text-3xl px-2' >
Linux < br / >
Savjet
< / raspon >
< br >
< br >
< raspon razreda = 'box-decoration-clone hover:text-yellow-500 bg-teal-600 text-white text-3xl px-2' >
Linux < br / >
Savjet
< / raspon >
< / tijelo >
Ovdje:
- ' hover:box-decoration-clone ” primjenjuje efekt “box-decoration-clone” kada se iznad elementa “box decoration-slice” zadrži pokazivač.
- ' lebdi:text-yellow-500 ” mijenja boju teksta u žutu kada se zadrži pokazivač iznad elementa “box-decoration-clone”.
Korak 2: Provjerite izlaz
Pokrenite HTML program da provjerite izlaz:
Gornji rezultat pokazuje da je efekt lebdenja primijenjen na elemente prema kojima je specificiran.
Zaključak
Tailwind CSS nudi kolekciju korisnih klasa za primjenu efekata lebdenja na bilo koji element. Za primjenu lebdenja na elementima prijeloma ukrasa okvira, upotrijebite ' lebdjeti ” i odredite učinak u HTML programu. Korisnici mogu promijeniti boju pozadine, boju teksta i boju obruba ili dodati sjenu elementu dok lebde. U ovom je članku objašnjen postupak primjene lebdenja s ukrasom okvira u Tailwindu.