V Tailwind CSS je » box-decoration-break ” lastnost določa upodabljanje ozadja, obrobe in oblazinjenja elementa, ko obsega več vrstic ali stolpcev. Ima dva razreda, tj. rezina « in » klon ”. Uporabniki lahko uporabijo lastnost »box-decoration-break« z prelomnimi točkami in medijskimi poizvedbami, da določijo, kako se postavitev in videz elementov spreminjata glede na širino naprave, in uporabijo različne sloge na podlagi prelomnih točk.
Ta članek bo prikazal metodo uporabe preloma dekoracije škatle z prelomnimi točkami in medijskimi poizvedbami.
Kako uporabiti prekinitev dekoracije polja z prelomnimi točkami in predstavnostnimi poizvedbami v Tailwindu?
Za uporabo preloma dekoracije polja z prelomnimi točkami in medijskimi poizvedbami je treba v programu HTML definirati različne vrednosti in slog za različne velikosti zaslona. Nato si oglejte spletno stran tako, da zaženete program HTML za preverjanje.
Za boljše razumevanje si oglejte spodnje korake:
1. korak: Uporabite prelomne točke in medijske poizvedbe s prelomom dekoracije polja
Ustvarite program HTML in določite različne vrednosti in slog za različne velikosti zaslona. Na primer, definirali smo ' md « in » lg ” prelomne točke s svojimi slogi:
< telo >< razpon razred = 'bg-teal-600 box-decoration-clone md:bg-yellow-500 lg:box-decoration-slice text-white text-3xl px-2' >
zdravo < št />
Linux < št />
Namig
razpon >
telo >
Tukaj:
- “ bg-teal-600 ” nastavi modrozeleno barvo za ozadje.
- “ box-decoration-klon ” je razred po meri, ki se uporablja za dekoracijo škatle za kloniranje.
- “ md:bg-rumena-500 ” doda rumeno barvo ozadja elementu za “ md ” prelomna točka (srednje veliki zasloni).
- “ lg:box-decoration-slice « nastavi učinek rezanja na dekoracijo škatle za » lg ” prelomna točka (veliki zasloni).
- “ besedilo-belo ” nastavi belo barvo besedila.
- “ besedilo-3xl ” nastavi velikost pisave na 3xl.
- “ px-2 ” elementu doda vodoravno oblazinjenje 2 slikovnih pik.
2. korak: Preverite izhod
Če želite zagotoviti, da so bile prekinitvene točke in medijske poizvedbe uspešno uporabljene, zaženite program HTML in si oglejte spletno stran:
Vidi se, da se spreminja spletna stran, glede na katero so bile definirane prelomne točke in medijske poizvedbe.
Zaključek
Če želite v Tailwindu uporabiti prelom okrasitve polja s prelomnimi točkami in medijskimi poizvedbami, najprej ustvarite datoteko HTML. Nato uporabite prekinitvene točke in medijske poizvedbe v programu HTML, tako da določite različne vrednosti in slog za različne velikosti zaslona. Za preverjanje zaženite program HTML in si oglejte spletno stran. Ta članek je prikazal metodo uporabe preloma dekoracije škatle s prekinitvenimi točkami in predstavnostnimi poizvedbami.