V CSS Tailwind sa „ krabica-dekorácia-prestávka ” určuje vykreslenie pozadia, orámovania a výplne prvku, keď sa rozprestiera na viacerých riadkoch alebo stĺpcoch. Má dve triedy, napr. plátok “ a „ klonovať “. Používatelia môžu použiť vlastnosť „box-decoration-break“ s bodmi prerušenia a mediálnymi dotazmi na určenie toho, ako sa rozloženie a vzhľad prvkov zmení v závislosti od šírky zariadenia, a použiť rôzne štýly na základe bodov prerušenia.
Tento článok demonštruje metódu použitia prerušenia dekorácie poľa s bodmi prerušenia a mediálnymi dotazmi.
Ako používať prestávku na zdobenie boxu s bodmi prerušenia a mediálnymi dopytmi v Tailwinde?
Ak chcete použiť prerušenie dekorácie rámčeka s bodmi prerušenia a mediálnymi dopytmi, je potrebné definovať rôzne hodnoty a štýly pre rôzne veľkosti obrazoviek v programe HTML. Potom zobrazte webovú stránku spustením programu HTML na overenie.
Pre lepšie pochopenie si pozrite nižšie uvedené kroky:
Krok 1: Použite prerušovacie body a mediálne dopyty s prestávkou na zdobenie krabice
Vytvorte program HTML a zadajte rôzne hodnoty a štýly pre rôzne veľkosti obrazovky. Napríklad sme definovali „ md “ a „ lg ” prelomové body s ich štýlmi:
< telo >< rozpätie trieda = '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ápoveda
rozpätie >
telo >
Tu:
- “ bg-teal-600 “ nastaví modrozelenú farbu na pozadie.
- “ krabica-dekorácia-klon “ je vlastná trieda používaná na dekoráciu klonovacích boxov.
- “ md:bg-žltá-500 ” použije žltú farbu pozadia na prvok pre „ md bod zlomu (stredne veľké obrazovky).
- “ lg:krabica-dekorácia-plátok “ nastaví efekt krájania na dekoráciu krabice pre „ lg bod zlomu (veľké obrazovky).
- “ text-biely ” nastaví bielu farbu textu.
- “ text-3xl ” nastaví veľkosť písma na 3xl.
- “ px-2 ” pridá do prvku vodorovnú výplň 2 pixely.
Krok 2: Overte výstup
Aby ste sa uistili, že body prerušenia a mediálne dotazy boli použité úspešne, spustite program HTML a zobrazte webovú stránku:
Je vidieť, že sa mení webová stránka, podľa ktorej boli zadefinované breakpointy a mediálne dopyty.
Záver
Ak chcete použiť prestávku na dekoráciu rámčeka s bodmi prerušenia a mediálnymi dopytmi v Tailwinde, najprv vytvorte súbor HTML. Potom použite body prerušenia a mediálne dotazy v programe HTML zadaním rôznych hodnôt a štýlu pre rôzne veľkosti obrazovky. Na overenie spustite program HTML a zobrazte webovú stránku. Tento článok demonštroval metódu použitia prerušenia dekorácie poľa s bodmi prerušenia a mediálnymi dotazmi.