U Tailwind CSS-u, ' kutija-ukras-prekid ” svojstvo određuje prikazivanje pozadine, obruba i ispune elementa kada se proteže preko više redaka ili stupaca. Ima dvije klase, tj. kriška ' i ' klon ”. Korisnici mogu koristiti svojstvo 'box-decoration-break' s prijelomnim točkama i medijskim upitima kako bi odredili kako se raspored i izgled elemenata mijenjaju ovisno o širini uređaja i primijenili različite stilove na temelju prijelomnih točaka.
Ovaj će članak demonstrirati metodu korištenja prijeloma ukrasa okvira s prijelomnim točkama i medijskim upitima.
Kako koristiti prekid dekoracije okvira s prijelomnim točkama i medijskim upitima u Tailwindu?
Za korištenje prijeloma za ukrašavanje okvira s prijelomnim točkama i medijskim upitima, potrebno je definirati različite vrijednosti i stilove za različite veličine zaslona u HTML programu. Zatim pogledajte web stranicu pokretanjem HTML programa za provjeru.
Za bolje razumijevanje pogledajte dolje navedene korake:
Korak 1: Koristite prijelomne točke i medijske upite s prijelomom za dekoraciju okvira
Napravite HTML program i navedite različite vrijednosti i stilove za različite veličine zaslona. Na primjer, definirali smo ' doktor medicine ' i ' lg ” prijelomne točke s njihovim stilovima:
< tijelo >< raspon razreda = 'bg-teal-600 box-decoration-clone md:bg-yellow-500 lg:box-decoration-slice text-white text-3xl px-2' >
zdravo < br />
Linux < br />
Savjet
raspon >
tijelo >
Ovdje:
- “ bg-teal-600 ” postavlja plavozelenu boju na pozadinu.
- “ kutija-dekoracija-klon ” je prilagođena klasa koja se koristi za ukrašavanje kutije za kloniranje.
- “ md:bg-žuta-500 ” primjenjuje žutu boju pozadine na element za “ doktor medicine ” Prijelomna točka (zasloni srednje veličine).
- “ lg:box-decoration-slice ” postavlja efekt rezanja na ukras kutije za “ lg ” Prijelomna točka (veliki ekrani).
- “ tekst-bijeli ” postavlja bijelu boju teksta.
- “ tekst-3xl ” postavlja veličinu fonta na 3xl.
- “ px-2 ” dodaje vodoravno ispunjavanje od 2 piksela elementu .
Korak 2: Provjerite izlaz
Kako biste bili sigurni da su prijelomne točke i medijski upiti uspješno primijenjeni, pokrenite HTML program i pogledajte web stranicu:
Vidljivo je da se mijenja web stranica prema kojoj su definirane prijelomne točke i medijski upiti.
Zaključak
Da biste koristili prijelom za ukrašavanje okvira s prijelomnim točkama i medijskim upitima u Tailwindu, prvo izradite HTML datoteku. Zatim upotrijebite prijelomne točke i medijske upite u HTML programu navodeći različite vrijednosti i stilove za različite veličine zaslona. Za provjeru pokrenite HTML program i pogledajte web stranicu. Ovaj članak demonstrira metodu korištenja prijeloma ukrasa okvira s prijelomnim točkama i medijskim upitima.