In Tailwind CSS, il ' scatola-decorazione-rottura ” determina il rendering dello sfondo, del bordo e della spaziatura interna di un elemento quando si estende su più righe o colonne. Ha due classi, ad esempio ' fetta ' E ' clone ”. Gli utenti possono utilizzare la proprietà 'box-decoration-break' con punti di interruzione e media query per determinare come il layout e l'aspetto degli elementi cambiano a seconda della larghezza del dispositivo e applicare stili diversi in base ai punti di interruzione.
Questo articolo dimostrerà il metodo di utilizzo dell'interruzione della decorazione della scatola con punti di interruzione e query multimediali.
Come utilizzare l'interruzione della decorazione della scatola con punti di interruzione e query multimediali in Tailwind?
Per utilizzare un'interruzione della decorazione della scatola con punti di interruzione e media query, è necessario definire valori e stili diversi per le diverse dimensioni dello schermo nel programma HTML. Quindi, visualizzare la pagina Web eseguendo il programma HTML per la verifica.
Per una migliore comprensione, controlla i passaggi sotto indicati:
Passaggio 1: utilizzare i punti di interruzione e le query multimediali con l'interruzione della decorazione della scatola
Crea un programma HTML e specifica valori e stili diversi per le diverse dimensioni dello schermo. Ad esempio, abbiamo definito “ md ' E ' LG 'Punti di interruzione con i loro stili:
< corpo >< span classe = 'bg-teal-600 box-decoration-clone md:bg-yellow-500 lg:box-decoration-slice text-white text-3xl px-2' >
Ciao < fratello />
Linux < fratello />
Suggerimento
span >
corpo >
Qui:
- “ bg-verde acqua-600 ” imposta il colore verde acqua sullo sfondo.
- “ box-decorazione-clone ” è una classe personalizzata utilizzata per la clonazione della decorazione della scatola.
- “ md:bg-giallo-500 ' applica un colore di sfondo giallo all'elemento per ' md ” punto di interruzione (schermi di medie dimensioni).
- “ lg:scatola-decorazione-fetta ” conferisce un effetto tagliente alla decorazione della scatola per il “ LG punto di interruzione (schermi di grandi dimensioni).
- “ testo-bianco ” imposta il colore bianco del testo.
- “ testo-3xl ” imposta la dimensione del carattere su 3xl.
- “ px-2 ” aggiunge un riempimento orizzontale di 2 pixel all'elemento .
Passaggio 2: verificare l'output
Per garantire che i punti di interruzione e le query multimediali siano stati applicati correttamente, eseguire il programma HTML e visualizzare la pagina Web:
Si può vedere che la pagina web sta cambiando in base alla quale sono stati definiti i breakpoint e le media query.
Conclusione
Per utilizzare un'interruzione della decorazione della scatola con punti di interruzione e query multimediali in Tailwind, crea innanzitutto un file HTML. Quindi, utilizza i punti di interruzione e le query multimediali nel programma HTML specificando valori e stili diversi per le diverse dimensioni dello schermo. Per la verifica, eseguire il programma HTML e visualizzare la pagina web. Questo articolo ha dimostrato il metodo di utilizzo dell'interruzione della decorazione della scatola con punti di interruzione e query multimediali.