Tailwind CSS-is on ' kast-kaunistus-paus ” atribuut määrab elemendi tausta, äärise ja polsterduse renderdamise, kui see hõlmab mitut rida või veergu. Sellel on kaks klassi, st ' viil ” ja „ kloon ”. Kasutajad saavad murdepunktide ja meediumipäringutega kasutada atribuuti „box-decoration-break”, et teha kindlaks, kuidas elementide paigutus ja välimus sõltuvalt seadme laiusest muutuvad, ning rakendada murdepunktide põhjal erinevaid stiile.
See artikkel demonstreerib kasti kaunistamise katkestuse kasutamise meetodit katkestuspunktide ja meediumipäringutega.
Kuidas kasutada kasti kaunistamise pausi murdepunktide ja meediapäringutega Tailwindis?
Katkestuspunktide ja meediumipäringutega karbikaunistuse katkestuse kasutamiseks on vaja HTML-programmis erinevate ekraanisuuruste jaoks määratleda erinevad väärtused ja stiil. Seejärel vaadake veebilehte, käivitades kontrollimiseks HTML-programmi.
Parema mõistmise huvides vaadake alltoodud samme.
1. samm: kasutage katkestuspunkte ja meediumipäringuid kasti kaunistamise vaheajaga
Looge HTML-programm ja määrake erinevate ekraanisuuruste jaoks erinevad väärtused ja stiil. Näiteks oleme määratlenud ' md ” ja „ lg ” murdepunktid nende stiilidega:
< keha >< ulatus klass = 'bg-teal-600 box-decoration-clone md:bg-yellow-500 lg:box-decoration-slice text-white text-3xl px-2' >
Tere < br />
Linux < br />
Vihje
ulatus >
keha >
Siin:
- “ bg-teal-600 ” seab sinakaspruuni värvi taustale.
- “ kast-kaunistus-kloon ” on kohandatud klass, mida kasutatakse karbi kaunistamiseks.
- “ md:bg-kollane-500 ” rakendab elemendi elemendile kollase taustavärvi md ” murdepunkt (keskmise suurusega ekraanid).
- “ lg:karp-kaunistus-viil ” seab kasti kaunistusele viilutamise efekti lg ” murdepunkt (suured ekraanid).
- “ tekst-valge ” määrab tekstile valge värvi.
- “ tekst-3xl ” määrab fondi suuruseks 3xl.
- “ px-2 ” lisab elemendile horisontaalse täidisega 2 pikslit.
2. samm: kontrollige väljundit
Katkestuspunktide ja meediumipäringute eduka rakendamise tagamiseks käivitage HTML-programm ja vaadake veebilehte.
On näha, et muutub veebileht, mille järgi murdepunktid ja meediapäringud määratleti.
Järeldus
Tailwindis katkestuspunktide ja meediumipäringutega karbikaunistuse pausi kasutamiseks looge esmalt HTML-fail. Seejärel kasutage HTML-programmis katkestuspunkte ja meediumipäringuid, määrates erinevate ekraanisuuruste jaoks erinevad väärtused ja stiili. Kontrollimiseks käivitage HTML-programm ja vaadake veebilehte. See artikkel on demonstreerinud kasti kaunistamise katkestuse kasutamist katkestuspunktide ja meediumipäringutega.