See artikkel demonstreerib Tailwindis kastikaunistusega hõljuki pealekandmise protseduuri.
Kuidas rakendada hõljukit kasti kaunistamise pausi taganttuules?
CSS-i atribuut „box-decoration-break” määrab elemendi tausta, äärise ja polsterduse renderdamise, kui see katab mitut rida või veergu. Hõljutusefekti rakendamiseks karbi kaunistuste katkestuselementidele tuleb kasutada ' hõljuma ” omadust ja rakendada elementidele mis tahes mõju.
Tutvuge praktilise demonstratsiooni allolevate sammudega:
1. toiming: kasutage HTML-programmis Box Decoration Break'is Hover Property'i
Looge HTML-programm ja kasutage kasti kaunistuse katkestuste elementide hõljutusomadusi. Näiteks oleme rakendanud ' hover:box-decoration-clone ' atribuut elemendil 'karbi kaunistus-viil' ja ' hõljutage: tekst-kollane-500 ' atribuut elemendil 'box-decoration-clone':
< keha >
< ulatus klass = 'box-decoration-slice hover:box-decoration-clone bg-teal-600 text-white text-3xl px-2' >
Linux < br / >
Vihje
< / ulatus >
< br >
< br >
< ulatus klass = 'box-decoration-clone hover:text-yellow-500 bg-teal-600 text-white text-3xl px-2' >
Linux < br / >
Vihje
< / ulatus >
< / keha >
Siin:
- ' hover:box-decoration-clone ” rakendab efekti „box-decoration-clone”, kui elemendi „box decoration-slice” kohal hõljutatakse.
- ' hõljutage: tekst-kollane-500 ” muudab teksti värvi kollaseks, kui elemendi „box-decoration-clone” kohal hõljutatakse.
2. samm: kontrollige väljundit
Väljundi kontrollimiseks käivitage HTML-programm:
Ülaltoodud väljund näitab, et hõljutusefekt on rakendatud elementidele, mille järgi see määrati.
Järeldus
Tailwind CSS pakub utiliidiklasside kogumit, et rakendada hõljutusefekte mis tahes elemendile. Kasti kaunistuse katkestuselementidele hõljutamiseks kasutage nuppu ' hõljuma ” atribuut ja määrake efekt HTML-programmis. Kasutajad saavad muuta taustavärvi, teksti värvi ja äärise värvi või lisada kursorit hõljutades elemendile varju. Selles artiklis on selgitatud Tailwindis kasti kaunistusega hõljuki pealekandmise protseduuri.