I Tailwind CSS er ' boks-pynt-pause ”-egenskapen bestemmer gjengivelsen av et elements bakgrunn, kantlinje og utfylling når det spenner over flere linjer eller kolonner. Den har to klasser, dvs. ' skive ' og ' klone '. Brukere kan bruke 'box-decoration-break'-egenskapen med bruddpunkter og mediespørringer for å bestemme hvordan layout og utseende til elementer endres avhengig av enhetens bredde og bruke forskjellige stiler basert på bruddpunktene.
Denne artikkelen vil demonstrere metoden for å bruke boksdekorasjonsbrudd med bruddpunkter og mediespørringer.
Hvordan bruke boksdekorasjonspause med pausepunkter og medieforespørsler i medvind?
For å bruke et boksdekorasjonsbrudd med bruddpunkter og mediespørringer, kreves det å definere ulike verdier og stil for ulike skjermstørrelser i HTML-programmet. Deretter kan du se nettsiden ved å kjøre HTML-programmet for verifisering.
For en bedre forståelse, sjekk ut trinnene nedenfor:
Trinn 1: Bruk pausepunkter og medieforespørsler med boksdekorasjonspause
Lag et HTML-program og spesifiser forskjellige verdier og stil for forskjellige skjermstørrelser. For eksempel har vi definert ' md ' og ' lg ” bruddpunkter med stylingene deres:
< kropp >< span klasse = 'bg-teal-600 box-decoration-clone md:bg-yellow-500 lg:box-decoration-slice text-white text-3xl px-2' >
Hallo < br />
Linux < br />
Hint
span >
kropp >
Her:
- ' bg-teal-600 ” setter den blågrønne fargen til bakgrunnen.
- ' boks-dekorasjon-klon ” er en tilpasset klasse som brukes til kloningsboksdekorasjon.
- ' md:bg-gul-500 ' bruker en gul bakgrunnsfarge på -elementet for ' md ” bruddpunkt (mellomstore skjermer).
- ' lg:boks-pynt-skive ' setter en skjæringseffekt til boksdekorasjonen for ' lg ” bruddpunkt (store skjermer).
- ' tekst-hvit ” setter den hvite fargen til teksten.
- ' tekst-3xl ” setter skriftstørrelsen til 3xl.
- ' px-2 ” legger til en horisontal polstring på 2 piksler til -elementet.
Trinn 2: Bekreft utdata
For å sikre at bruddpunktene og mediespørringene har blitt brukt på en vellykket måte, kjør HTML-programmet og se nettsiden:
Det kan ses at nettsiden endrer seg i henhold til hvilke bruddpunkter og mediespørringer ble definert.
Konklusjon
For å bruke en boksdekorasjonspause med bruddpunkter og mediespørringer i Tailwind, oppretter du først en HTML-fil. Bruk deretter bruddpunktene og mediespørringene i HTML-programmet ved å spesifisere forskjellige verdier og stiler for forskjellige skjermstørrelser. For verifisering, kjør HTML-programmet og se nettsiden. Denne artikkelen har demonstrert metoden for å bruke boksdekorasjonsbrudd med bruddpunkter og mediespørringer.