V Tailwind CSS je „ krabice-dekorace-přestávka Vlastnost ” určuje vykreslení pozadí, ohraničení a odsazení prvku, když prvek zahrnuje více řádků nebo sloupců. Má dvě třídy, tj. plátek ' a ' klon “. Uživatelé mohou pomocí vlastnosti „box-decoration-break“ s body přerušení a dotazy na média určit, jak se rozvržení a vzhled prvků změní v závislosti na šířce zařízení, a použít různé styly na základě bodů přerušení.
Tento článek bude demonstrovat metodu použití přerušení dekorace pole s body přerušení a dotazy na média.
Jak používat Box Decoration Break s body přerušení a mediálními dotazy ve službě Tailwind?
Chcete-li použít přerušení dekorace rámečku s body přerušení a dotazy na média, je nutné v programu HTML definovat různé hodnoty a styl pro různé velikosti obrazovky. Poté zobrazte webovou stránku spuštěním programu HTML pro ověření.
Pro lepší pochopení se podívejte na níže uvedené kroky:
Krok 1: Použijte body přerušení a dotazy na média s přestávkou dekorace krabice
Vytvořte program HTML a zadejte různé hodnoty a styl pro různé velikosti obrazovky. Například jsme definovali „ md ' a ' lg ” body zlomu se svými styly:
< tělo >< rozpětí třída = 'bg-teal-600 box-decoration-clone md:bg-yellow-500 lg:box-decoration-slice text-white text-3xl px-2' >
Ahoj < br />
Linux < br />
Náznak
rozpětí >
tělo >
Tady:
- “ bg-teal-600 “ nastaví modrozelenou barvu na pozadí.
- “ krabice-dekorace-klon “ je vlastní třída používaná pro dekoraci klonovacích krabic.
- “ md:bg-žlutá-500 ” použije žlutou barvu pozadí na prvek pro „ md ” bod přerušení (středně velké obrazovky).
- “ lg:box-decoration-slice “ nastaví efekt krájení na ozdobu krabice pro „ lg ” bod přerušení (velké obrazovky).
- “ text-bílý ” nastaví bílou barvu textu.
- “ text-3xl ” nastaví velikost písma na 3xl.
- “ px-2 ” přidá do prvku vodorovné odsazení 2 pixely.
Krok 2: Ověřte výstup
Chcete-li zajistit, že body přerušení a dotazy na média byly úspěšně použity, spusťte program HTML a zobrazte webovou stránku:
Je vidět, že se mění webová stránka, podle které byly definovány breakpointy a mediální dotazy.
Závěr
Chcete-li v Tailwindu použít přerušení zdobení rámečku s body přerušení a dotazy na média, nejprve vytvořte soubor HTML. Potom použijte zarážky a dotazy na média v programu HTML zadáním různých hodnot a stylů pro různé velikosti obrazovky. Pro ověření spusťte program HTML a zobrazte webovou stránku. Tento článek demonstroval metodu použití přerušení zdobení pole s body přerušení a dotazy na média.