Tailwind CSS:ssä ' laatikko-koristelu-tauko ”-ominaisuus määrittää elementin taustan, reunuksen ja täyteen renderöinnin, kun se kattaa useita rivejä tai sarakkeita. Siinä on kaksi luokkaa eli ' viipale ' ja ' klooni ”. Käyttäjät voivat käyttää 'box-decoration-break' ominaisuutta keskeytyskohtien ja mediakyselyiden kanssa määrittääkseen, kuinka elementtien asettelu ja ulkonäkö muuttuvat laitteen leveyden mukaan, ja käyttää erilaisia tyylejä keskeytyskohtien perusteella.
Tämä artikkeli esittelee tapaa käyttää laatikon koristelukatkoja keskeytyskohtien ja mediakyselyiden kanssa.
Kuinka käyttää laatikon koristelutaukoa keskeytyspisteiden ja mediakyselyiden kanssa Tailwindissä?
Laatikon koristelukatkon käyttäminen keskeytyspisteiden ja mediakyselyiden kanssa edellyttää, että HTML-ohjelmassa on määriteltävä eri arvot ja tyylit eri näyttökokoille. Tarkastele sitten verkkosivua suorittamalla HTML-ohjelma vahvistusta varten.
Jotta ymmärrät paremmin, tarkista alla mainitut vaiheet:
Vaihe 1: Käytä keskeytyspisteitä ja mediakyselyitä laatikon koristelutauon kanssa
Luo HTML-ohjelma ja määritä eri arvot ja tyyli eri näyttökokoille. Olemme esimerkiksi määrittäneet ' md ' ja ' lg ”rajapisteitä tyylillään:
< kehon >< jänneväli luokkaa = 'bg-teal-600 box-decoration-clone md:bg-yellow-500 lg:box-decoration-slice text-white text-3xl px-2' >
Hei < br />
Linux < br />
Vihje
jänneväli >
kehon >
Tässä:
- ' bg-teal-600 ” asettaa sinivihreän värin taustalle.
- ' laatikko-koriste-klooni ” on mukautettu luokka, jota käytetään laatikoiden koristeluun.
- ' md:bg-keltainen-500 ' käyttää keltaista taustaväriä -elementtiin ' md ” keskeytyskohta (keskikokoiset näytöt).
- ' lg:box-decoration-slice ' asettaa viipalointiefektin laatikon koristeluun ' lg ” keskeytyskohta (suuret näytöt).
- ' teksti-valkoinen ” määrittää tekstin valkoisen värin.
- ' teksti-3xl ” asettaa kirjasinkooksi 3xl.
- ' px-2 ” lisää -elementtiin vaakasuoran täytön, jossa on 2 pikseliä.
Vaihe 2: Tarkista lähtö
Varmista, että keskeytyskohdat ja mediakyselyt on otettu käyttöön onnistuneesti, suorittamalla HTML-ohjelma ja tarkastelemalla verkkosivua:
Voidaan nähdä, että verkkosivu muuttuu, jonka mukaan keskeytyskohdat ja mediakyselyt määriteltiin.
Johtopäätös
Luo ensin HTML-tiedosto, jos haluat käyttää laatikon koristelutaukoa keskeytyspisteiden ja mediakyselyjen kanssa Tailwindissä. Käytä sitten keskeytyskohtia ja mediakyselyjä HTML-ohjelmassa määrittämällä eri arvot ja tyylit eri näyttökokoille. Vahvista suorittamalla HTML-ohjelma ja tarkastelemalla verkkosivua. Tämä artikkeli on osoittanut menetelmän käyttää laatikon koristelukatkoja keskeytyspisteiden ja mediakyselyiden kanssa.