A Tailwind CSS-ben a „ doboz-dísz-szünet ” tulajdonság határozza meg egy elem hátterének, szegélyének és kitöltésének megjelenítését, ha az több sort vagy oszlopot ível át. Két osztálya van, azaz: ' szelet ” és „ klón ”. A felhasználók a „box-decoration-break” tulajdonságot használhatják töréspontokkal és médialekérdezésekkel, hogy meghatározzák, hogyan változik az elemek elrendezése és megjelenése az eszköz szélességétől függően, és különböző stílusokat alkalmazhatnak a töréspontok alapján.
Ez a cikk bemutatja a dobozdíszítés töréspontokkal és médialekérdezésekkel való használatának módszerét.
Hogyan használjuk a dobozdekorációs szünetet töréspontokkal és médialekérdezésekkel a Tailwindben?
Ha töréspontokkal és médialekérdezésekkel szeretne dobozdekorációs szünetet használni, a HTML programban különböző értékeket és stílust kell megadni a különböző képernyőméretekhez. Ezután tekintse meg a weboldalt a HTML program futtatásával ellenőrzés céljából.
A jobb megértés érdekében nézze meg az alábbi lépéseket:
1. lépés: Használjon töréspontokat és médialekérdezéseket a dobozdekorációs szünettel
Hozzon létre egy HTML programot, és adjon meg különböző értékeket és stílust a különböző képernyőméretekhez. Meghatároztuk például: md ” és „ lg ” töréspontok stílusukkal:
< test >< span osztály = 'bg-teal-600 box-decoration-clone md:bg-yellow-500 lg:box-decoration-slice text-white text-3xl px-2' >
Helló < br />
Linux < br />
Célzás
span >
test >
Itt:
- ' bg-teal-600 ” a kékeszöld színt állítja a háttérbe.
- ' doboz-dísz-klón ” egy egyedi osztály, amelyet a doboz díszítésére használnak.
- ' md:bg-sárga-500 ' sárga háttérszínt alkalmaz a elemre a ' md ” töréspont (közepes méretű képernyők).
- ' lg:dobozdísz-szelet ” szeletelő hatást ad a doboz dekorációjához lg ” töréspont (nagy képernyők).
- ' szöveg-fehér ” beállítja a szöveg fehér színét.
- ' szöveg-3xl ” a betűméretet 3xl-re állítja.
- ' px-2 ” 2 képpontos vízszintes kitöltést ad a elemhez.
2. lépés: Ellenőrizze a kimenetet
A töréspontok és médialekérdezések sikeres alkalmazásának biztosításához futtassa a HTML programot, és tekintse meg a weboldalt:
Látható, hogy változik az a weboldal, amely szerint a töréspontokat és a médialekérdezéseket meghatározták.
Következtetés
Ha a Tailwindben töréspontokkal és médialekérdezésekkel szeretne dobozdíszítési szünetet használni, először hozzon létre egy HTML-fájlt. Ezután használja a töréspontokat és a médialekérdezéseket a HTML programban különböző értékek és stílusok megadásával a különböző képernyőméretekhez. Az ellenőrzéshez futtassa a HTML programot, és tekintse meg a weboldalt. Ez a cikk bemutatta a dobozdíszítés megszakításának módszerét töréspontokkal és médialekérdezésekkel.