A Tailwind CSS, el ' caixa-decoració-pausa La propietat determina la representació del fons, la vora i el farciment d'un element quan abasta diverses línies o columnes. Té dues classes, és a dir, ' llesca ' i ' clonar ”. Els usuaris poden utilitzar la propietat 'box-decoration-break' amb punts d'interrupció i consultes multimèdia per determinar com canvien la disposició i l'aparença dels elements en funció de l'amplada del dispositiu i aplicar diferents estils en funció dels punts d'interrupció.
Aquest article mostrarà el mètode d'utilitzar la ruptura de decoració de caixes amb punts d'interrupció i consultes multimèdia.
Com utilitzar la ruptura de decoració de caixes amb punts d'interrupció i consultes de mitjans a Tailwind?
Per utilitzar una interrupció de decoració de caixa amb punts d'interrupció i consultes multimèdia, cal definir diferents valors i estils per a diferents mides de pantalla al programa HTML. A continuació, visualitzeu la pàgina web executant el programa HTML per a la verificació.
Per a una millor comprensió, consulteu els passos esmentats a continuació:
Pas 1: utilitzeu els punts d'interrupció i les consultes de mitjans amb la pausa de decoració de caixa
Creeu un programa HTML i especifiqueu diferents valors i estils per a diferents mides de pantalla. Per exemple, hem definit ' md ' i ' lg ” punts de ruptura amb els seus estils:
< cos >< span classe = 'bg-teal-600 box-decoration-clone md:bg-yellow-500 lg:box-decoration-slice text-white text-3xl px-2' >
Hola < br />
Linux < br />
Pista
span >
cos >
Aquí:
- “ bg-teal-600 ” estableix el color verd verde al fons.
- “ capsa-decoració-clon ” és una classe personalitzada utilitzada per a la decoració de caixes de clonació.
- “ md:bg-groc-500 ” aplica un color de fons groc a l'element per al “ md ” punt d'interrupció (pantalles de mida mitjana).
- “ lg:box-decoration-slice ” estableix un efecte de tall a la decoració de la caixa per al “ lg ” punt d'interrupció (pantalles grans).
- “ text-blanc ” estableix el color blanc al text.
- “ text-3xl ” estableix la mida de la lletra en 3xl.
- “ px-2 ” afegeix un farciment horitzontal de 2 píxels a l'element .
Pas 2: verifiqueu la sortida
Per assegurar-vos que els punts d'interrupció i les consultes multimèdia s'han aplicat correctament, executeu el programa HTML i visualitzeu la pàgina web:
Es pot veure que la pàgina web està canviant segons la qual es definien els punts d'interrupció i les consultes de mitjans.
Conclusió
Per utilitzar una interrupció de decoració de caixa amb punts d'interrupció i consultes multimèdia a Tailwind, primer, creeu un fitxer HTML. A continuació, utilitzeu els punts d'interrupció i les consultes multimèdia del programa HTML especificant diferents valors i estils per a diferents mides de pantalla. Per a la verificació, executeu el programa HTML i visualitzeu la pàgina web. Aquest article ha demostrat el mètode d'utilitzar la ruptura de decoració de caixes amb punts d'interrupció i consultes multimèdia.