I Tailwind CSS, ' box-dekoration-paus ”-egenskapen bestämmer renderingen av ett elements bakgrund, ram och utfyllnad när det sträcker sig över flera linjer eller kolumner. Den har två klasser, dvs. skiva ' och ' klona ”. Användare kan använda egenskapen 'box-decoration-break' med brytpunkter och mediefrågor för att bestämma hur layouten och utseendet på elementen ändras beroende på enhetens bredd och tillämpa olika stilar baserat på brytpunkterna.
Den här artikeln kommer att demonstrera metoden för att använda boxdekorationsbrytning med brytpunkter och mediefrågor.
Hur man använder Box Decoration Break med brytpunkter och mediafrågor i medvind?
För att använda en boxdekorationspaus med brytpunkter och mediefrågor krävs att man definierar olika värden och stil för olika skärmstorlekar i HTML-programmet. Se sedan webbsidan genom att köra HTML-programmet för verifiering.
För en bättre förståelse, kolla in stegen nedan:
Steg 1: Använd Breakpoints och Media Querys med Box Decoration Break
Skapa ett HTML-program och ange olika värden och stil för olika skärmstorlekar. Till exempel har vi definierat ' md ' och ' lg ” brytpunkter med sina stylingar:
< kropp >< spänna klass = 'bg-teal-600 box-decoration-clone md:bg-yellow-500 lg:box-decoration-slice text-white text-3xl px-2' >
Hallå < br />
Linux < br />
Antydan
spänna >
kropp >
Här:
- ' bg-teal-600 ” ställer in den kricka färgen till bakgrunden.
- ' box-dekoration-klon ” är en anpassad klass som används för kloningsdekoration.
- ' md:bg-gul-500 ” tillämpar en gul bakgrundsfärg på -elementet för ” md ” brytpunkt (medelstora skärmar).
- ' lg:låda-dekoration-skiva ' ställer in en skivningseffekt på lådans dekoration för ' lg ” brytpunkt (stora skärmar).
- ' text-vit ” ställer in den vita färgen på texten.
- ' text-3xl ” ställer in teckenstorleken till 3xl.
- ' px-2 ” lägger till en horisontell utfyllnad på 2 pixlar till -elementet.
Steg 2: Verifiera utdata
För att säkerställa att brytpunkterna och mediefrågorna har tillämpats framgångsrikt, kör HTML-programmet och titta på webbsidan:
Det kan ses att webbsidan förändras enligt vilka brytpunkter och mediefrågor definierades.
Slutsats
För att använda en boxdekorationspaus med brytpunkter och mediefrågor i Tailwind, skapa först en HTML-fil. Använd sedan brytpunkterna och mediefrågorna i HTML-programmet genom att ange olika värden och stil för olika skärmstorlekar. För verifiering, kör HTML-programmet och se webbsidan. Den här artikeln har demonstrerat metoden att använda boxdekorationsbrytning med brytpunkter och mediefrågor.