W CSS Tailwind „ przerwa na dekorację pudełka ” określa sposób renderowania tła, obramowania i wypełnienia elementu, gdy obejmuje on wiele wierszy lub kolumn. Ma dwie klasy, tj. „ plasterek ' I ' klon ”. Użytkownicy mogą używać właściwości „box-decoration-break” z punktami przerwania i zapytaniami o media, aby określić, jak zmienia się układ i wygląd elementów w zależności od szerokości urządzenia i zastosować różne style w oparciu o punkty przerwania.
W tym artykule zademonstrujemy metodę wykorzystania przerwania dekoracji pudełka z punktami przerwania i zapytaniami o media.
Jak korzystać z przerwy w dekoracji pudełka z punktami przerwania i zapytaniami o media w Tailwind?
Aby użyć przerwania dekoracji pudełka z punktami przerwania i zapytaniami o media, wymagane jest zdefiniowanie różnych wartości i stylów dla różnych rozmiarów ekranu w programie HTML. Następnie wyświetl stronę internetową, uruchamiając program HTML w celu weryfikacji.
Aby lepiej zrozumieć, zapoznaj się z poniższymi krokami:
Krok 1: Użyj punktów przerwania i zapytań o media z przerwami w dekoracji pudełka
Utwórz program HTML i określ różne wartości i style dla różnych rozmiarów ekranu. Na przykład zdefiniowaliśmy „ md ' I ' lg ” breakpointy z ich stylizacjami:
< ciało >< Zakres klasa = „bg-teal-600 box-decoration-clone md:bg-yellow-500 lg:box-decoration-slice text-white text-3xl px-2” >
Cześć < br />
Linuks < br />
Wskazówka
Zakres >
ciało >
Tutaj:
- “ bg-turkusowy-600 ” ustawia turkusowy kolor tła.
- “ klon dekoracji pudełka ” to niestandardowa klasa używana do klonowania dekoracji pudełek.
- “ md: bg-żółty-500 ” stosuje żółty kolor tła do elementu dla elementu „ md ” punkt przerwania (ekrany średniej wielkości).
- “ lg:dekoracja-pudełka-plasterek ” ustawia efekt krojenia dekoracji pudełka dla „ lg ” punkt przerwania (duże ekrany).
- “ tekst-biały ” ustawia biały kolor tekstu.
- “ tekst-3xl ” ustawia rozmiar czcionki na 3xl.
- “ px-2 ” dodaje poziome wypełnienie 2 pikseli do elementu .
Krok 2: Sprawdź dane wyjściowe
Aby upewnić się, że punkty przerwania i zapytania o media zostały pomyślnie zastosowane, uruchom program HTML i wyświetl stronę internetową:
Widać, że zmienia się strona internetowa, zgodnie z którą zostały zdefiniowane punkty przerwania i zapytania o media.
Wniosek
Aby użyć przerwania dekoracji pudełka z punktami przerwania i zapytaniami o media w Tailwind, najpierw utwórz plik HTML. Następnie użyj punktów przerwania i zapytań o media w programie HTML, określając różne wartości i style dla różnych rozmiarów ekranu. W celu weryfikacji uruchom program HTML i wyświetl stronę internetową. W tym artykule zademonstrowano metodę wykorzystania przerwania dekoracji pudełka z punktami przerwania i zapytaniami o media.