In Tailwind CSS is de “ doos-decoratie-pauze ” eigenschap bepaalt de weergave van de achtergrond, rand en opvulling van een element wanneer het meerdere regels of kolommen omspant. Het heeft twee klassen, namelijk: ' plak ' En ' kloon ”. Gebruikers kunnen de eigenschap 'box-decoration-break' gebruiken met breekpunten en mediaquery's om te bepalen hoe de lay-out en het uiterlijk van elementen veranderen afhankelijk van de breedte van het apparaat en verschillende stijlen toepassen op basis van de breekpunten.
Dit artikel demonstreert de methode voor het gebruik van box decoration break met breekpunten en mediaquery's.
Hoe gebruik je Box Decoration Break met breekpunten en mediaquery's in Tailwind?
Om een vakdecoratieonderbreking te gebruiken met breekpunten en mediaquery's, is het vereist om verschillende waarden en stijlen te definiëren voor verschillende schermformaten in het HTML-programma. Bekijk vervolgens de webpagina door het HTML-programma ter verificatie uit te voeren.
Bekijk de onderstaande stappen voor een beter begrip:
Stap 1: gebruik breekpunten en mediaquery's met Box Decoration Break
Maak een HTML-programma en specificeer verschillende waarden en stijlen voor verschillende schermformaten. We hebben bijvoorbeeld gedefinieerd ' md ' En ' lg ”Breekpunten met hun styling:
< lichaam >< span klas = 'bg-teal-600 box-decoration-clone md:bg-yellow-500 lg:box-decoration-slice text-white text-3xl px-2' >
Hallo < br />
Linux < br />
Tip
span >
lichaam >
Hier:
- “ bg-teal-600 ” zet de groenblauw kleur naar de achtergrond.
- “ box-decoratie-kloon ” is een aangepaste klasse die wordt gebruikt voor het klonen van doosdecoratie.
- “ md:bg-geel-500 ” past een gele achtergrondkleur toe op het -element voor de “ md ” breekpunt (middelgrote schermen).
- “ lg:doos-decoratie-plak ' stelt een snijdend effect in op de doosdecoratie voor de ' lg ” breekpunt (grote schermen).
- “ tekst-wit ” stelt de witte kleur in op de tekst.
- “ tekst-3xl ” stelt de lettergrootte in op 3xl.
- “ px-2 ” voegt een horizontale opvulling van 2 pixels toe aan het -element.
Stap 2: uitvoer verifiëren
Om ervoor te zorgen dat de breekpunten en mediaquery's met succes zijn toegepast, voert u het HTML-programma uit en bekijkt u de webpagina:
Het is te zien dat de webpagina verandert op basis waarvan de breekpunten en mediaquery's zijn gedefinieerd.
Conclusie
Maak eerst een HTML-bestand om een vakdecoratieonderbreking met breekpunten en mediaquery's in Tailwind te gebruiken. Gebruik vervolgens de breekpunten en mediaquery's in het HTML-programma door verschillende waarden en stijlen op te geven voor verschillende schermformaten. Voer ter verificatie het HTML-programma uit en bekijk de webpagina. Dit artikel heeft de methode gedemonstreerd voor het gebruik van boxdecoratie-onderbrekingen met breekpunten en mediaquery's.