Šiame straipsnyje bus parodyta užvedimo su dėžutės dekoravimo procedūra Tailwind.
Kaip pritaikyti užvedimą ant dėžutės dekoravimo pertraukos tailwind?
CSS ypatybė „box-decoration-break“ nustato elemento fono, kraštinės ir užpildymo atvaizdavimą, kai jis apima kelias eilutes arba stulpelius. Norint pritaikyti užvedimo efektą dėžutės dekoravimo pertraukos elementams, reikia naudoti „ užveskite pelės žymeklį “ savybę ir taikyti bet kokį poveikį elementams.
Peržiūrėkite toliau pateiktus praktinio demonstravimo veiksmus:
1 veiksmas: naudokite „Hover Property“ HTML programos dėžutės dekoravimo pertraukoje
Sukurkite HTML programą ir naudokite bet kokią dėžutės dekoravimo pertraukos elementų užvedimo ypatybę. Pavyzdžiui, mes pritaikėme „ hover:box-decoration-clone “ ypatybę ant elemento „dėžutės dekoravimo gabalas“ ir „ užveskite pelės žymeklį: tekstas-geltonas-500 “ ypatybę elemente „box-decoration-clon“:
< kūnas >
< span klasė = 'box-decoration-slice hover:box-decoration-clone bg-teal-600 text-white text-3xl px-2' >
Linux < br / >
Užuomina
< / span >
< br >
< br >
< span klasė = 'box-decoration-clone hover:text-yellow-500 bg-teal-600 text-white text-3xl px-2' >
Linux < br / >
Užuomina
< / span >
< / kūnas >
Čia:
- „ hover:box-decoration-clone “ pritaiko „dėžutės puošybos-klono“ efektą, kai užvedamas pelės žymeklis ant elemento „dėžutės dekoravimo gabalas“.
- „ užveskite pelės žymeklį: tekstas-geltonas-500 “ pakeičia teksto spalvą į geltoną, kai užvedamas žymeklis ant elemento „box-decoration-clon“.
2 veiksmas: patikrinkite išvestį
Paleiskite HTML programą, kad patikrintumėte išvestį:
Aukščiau pateikta išvestis rodo, kad užvedimo efektas buvo pritaikytas elementams, pagal kuriuos jis buvo nurodytas.
Išvada
Tailwind CSS siūlo naudingumo klasių rinkinį, skirtą bet kuriam elementui pritaikyti užvedimo efektus. Norėdami užvesti pelės žymeklį ant dėžutės dekoravimo pertraukos elementų, naudokite „ užveskite pelės žymeklį ” ypatybę ir nurodykite efektą HTML programoje. Vartotojai gali pakeisti fono spalvą, teksto spalvą ir kraštinės spalvą arba pridėti šešėlį prie elemento, užvedę pelės žymeklį. Šiame straipsnyje paaiškinta, kaip naudoti užvedimą su dėžutės dekoravimu Tailwind.