I Tailwind CSS er ' æske-pynt-pause ” egenskab bestemmer gengivelsen af et elements baggrund, kant og udfyldning, når det strækker sig over flere linjer eller kolonner. Den har to klasser, dvs. skive ' og ' klon ”. Brugere kan bruge egenskaben 'box-decoration-break' med brudpunkter og medieforespørgsler til at bestemme, hvordan elementernes layout og udseende ændres afhængigt af enhedens bredde og anvende forskellige stilarter baseret på brudpunkterne.
Denne artikel vil demonstrere metoden til at bruge kassedekorationspause med brudpunkter og medieforespørgsler.
Hvordan man bruger Box Decoration Break med brudpunkter og medieforespørgsler i medvind?
For at bruge en kassedekorationspause med brudpunkter og medieforespørgsler er det nødvendigt at definere forskellige værdier og stil for forskellige skærmstørrelser i HTML-programmet. Se derefter websiden ved at køre HTML-programmet til verifikation.
For en bedre forståelse, tjek nedenstående trin:
Trin 1: Brug Breakpoints og Medieforespørgsler med Box Decoration Break
Opret et HTML-program og angiv forskellige værdier og stil til forskellige skærmstørrelser. For eksempel har vi defineret ' md ' og ' lg ” brudpunkter med deres stylinger:
< legeme >< span klasse = 'bg-teal-600 box-decoration-clone md:bg-yellow-500 lg:box-decoration-slice text-white text-3xl px-2' >
Hej < br />
Linux < br />
Antydning
span >
legeme >
Her:
- “ bg-teal-600 ” indstiller den blågrønne farve til baggrunden.
- “ æske-dekoration-klon ” er en brugerdefineret klasse, der bruges til kloning af æsker.
- “ md:bg-gul-500 ' anvender en gul baggrundsfarve til -elementet for ' md ” brudpunkt (mellemstore skærme).
- “ lg:kasse-pynt-skive ' indstiller en udskæringseffekt til kassedekorationen for ' lg ” brudpunkt (store skærme).
- “ tekst-hvid ” indstiller den hvide farve til teksten.
- “ tekst-3xl ” indstiller skriftstørrelsen til 3xl.
- “ px-2 ” tilføjer en vandret polstring på 2 pixels til -elementet.
Trin 2: Bekræft output
For at sikre, at brudpunkterne og medieforespørgslerne er blevet anvendt korrekt, skal du køre HTML-programmet og se websiden:
Det kan ses, at websiden ændrer sig, alt efter hvilke brudpunkter og medieforespørgsler blev defineret.
Konklusion
For at bruge en kassedekorationspause med breakpoints og medieforespørgsler i Tailwind skal du først oprette en HTML-fil. Brug derefter breakpoints og medieforespørgsler i HTML-programmet ved at angive forskellige værdier og stil for forskellige skærmstørrelser. For verifikation skal du køre HTML-programmet og se websiden. Denne artikel har demonstreret metoden til at bruge kassedekorationsbrud med brudpunkter og medieforespørgsler.