Dans Tailwind CSS, le ' box-déco-pause ” détermine le rendu de l'arrière-plan, de la bordure et du rembourrage d'un élément lorsqu'il s'étend sur plusieurs lignes ou colonnes. Il a deux classes, c'est-à-dire ' tranche ' et ' cloner ”. Les utilisateurs peuvent utiliser la propriété 'box-decoration-break' avec des points d'arrêt et des requêtes multimédias pour déterminer comment la disposition et l'apparence des éléments changent en fonction de la largeur de l'appareil et appliquer différents styles en fonction des points d'arrêt.
Cet article illustrera la méthode d'utilisation de la rupture de décoration de boîte avec des points d'arrêt et des requêtes multimédias.
Comment utiliser Box Decoration Break avec des points d'arrêt et des requêtes multimédias dans Tailwind ?
Pour utiliser une pause de décoration de boîte avec des points d'arrêt et des requêtes multimédias, il est nécessaire de définir différentes valeurs et styles pour différentes tailles d'écran dans le programme HTML. Ensuite, affichez la page Web en exécutant le programme HTML pour vérification.
Pour une meilleure compréhension, consultez les étapes ci-dessous :
Étape 1 : Utiliser des points d'arrêt et des requêtes multimédias avec la pause de décoration de boîte
Créez un programme HTML et spécifiez différentes valeurs et styles pour différentes tailles d'écran. Par exemple, nous avons défini ' Maryland ' et ' lg ” points d'arrêt avec leurs styles :
< corps >< portée classe = 'bg-teal-600 box-decoration-clone md:bg-yellow-500 lg:box-decoration-slice text-white text-3xl px-2' >
Bonjour < Br />
Linux < Br />
Indice
portée >
corps >
Ici:
- ' bg-sarcelle-600 ” définit la couleur sarcelle à l'arrière-plan.
- ' box-déco-clone ” est une classe personnalisée utilisée pour cloner la décoration de la boîte.
- ' md:bg-jaune-500 ” applique une couleur de fond jaune à l'élément pour le “ Maryland » point d'arrêt (écrans de taille moyenne).
- ' lg:boîte-décoration-tranche ' définit un effet de découpage à la décoration de la boîte pour le ' lg » point d'arrêt (grands écrans).
- ' texte blanc ” définit la couleur blanche du texte.
- ' texte-3xl ” définit la taille de la police sur 3xl.
- ' px-2 ” ajoute un rembourrage horizontal de 2 pixels à l'élément .
Étape 2 : vérifier la sortie
Pour vous assurer que les points d'arrêt et les requêtes multimédias ont été appliqués avec succès, exécutez le programme HTML et affichez la page Web :
On peut voir que la page Web change en fonction de laquelle les points d'arrêt et les requêtes multimédias ont été définis.
Conclusion
Pour utiliser une pause de décoration de boîte avec des points d'arrêt et des requêtes multimédias dans Tailwind, commencez par créer un fichier HTML. Ensuite, utilisez les points d'arrêt et les requêtes multimédias dans le programme HTML en spécifiant différentes valeurs et styles pour différentes tailles d'écran. Pour vérification, exécutez le programme HTML et affichez la page Web. Cet article a démontré la méthode d'utilisation de la rupture de décoration de boîte avec des points d'arrêt et des requêtes multimédias.