ב-Tailwind CSS, ה' קופסא-קישוט-שבירה ' המאפיין קובע את העיבוד של הרקע, הגבול והריפוד של אלמנט כאשר הוא משתרע על פני מספר שורות או עמודות. יש לו שתי מחלקות, כלומר ' פרוסה ' ו' שיבוט '. משתמשים יכולים להשתמש במאפיין 'box-decoration-break' עם נקודות שבירה ושאילתות מדיה כדי לקבוע כיצד הפריסה והמראה של האלמנטים משתנים בהתאם לרוחב המכשיר ולהחיל סגנונות שונים על סמך נקודות הפריצה.
מאמר זה ידגים את שיטת השימוש בהפסקת קישוט קופסאות עם נקודות שבירה ושאילתות מדיה.
כיצד להשתמש בהפסקת קישוט קופסאות עם נקודות פריצה ושאילתות מדיה ברוח הגבית?
כדי להשתמש בהפסקת עיטור תיבה עם נקודות שבירה ושאילתות מדיה, נדרש להגדיר ערכים וסגנון שונים עבור גדלי מסך שונים בתוכנת HTML. לאחר מכן, הצג את דף האינטרנט על ידי הפעלת תוכנית ה-HTML לצורך אימות.
להבנה טובה יותר, בדוק את השלבים המוזכרים להלן:
שלב 1: השתמש בנקודות פריצה ושאילתות מדיה עם הפסקת קישוט קופסאות
צור תוכנת HTML וציין ערכים וסגנון שונים עבור גדלי מסך שונים. למשל, הגדרנו ' md ' ו' lg ' נקודות שבירה עם הסטיילינג שלהם:
< גוּף >< לְהַקִיף מעמד = 'bg-teal-600 box-decoration-clone md:bg-yellow-500 lg:box-decoration-slice text-white text-3xl px-2' >
שלום < br />
לינוקס < br />
רֶמֶז
לְהַקִיף >
גוּף >
כאן:
- ' bg-teal-600 'מגדיר את צבע הצהבהב לרקע.
- ' קופסא-קישוט-שיבוט ” הוא מחלקה מותאמת אישית המשמשת לקישוט קופסאות שיבוט.
- ' md:bg-yellow-500 ' מחיל צבע רקע צהוב על האלמנט עבור ' md ” נקודת שבירה (מסכים בגודל בינוני).
- ' lg:קופסה-קישוט-פרוסה ' מגדיר אפקט חיתוך לקישוט הקופסה עבור ' lg 'נקודת שבירה (מסכים גדולים).
- ' טקסט-לבן ' מגדיר את הצבע הלבן לטקסט.
- ' טקסט-3xl ' מגדיר את גודל הגופן ל-3xl.
- ' px-2 ' מוסיף ריפוד אופקי של 2 פיקסלים לאלמנט .
שלב 2: אימות פלט
כדי להבטיח שנקודות השבירה ושאילתות המדיה יושמו בהצלחה, הפעל את תוכנית ה-HTML והצג את דף האינטרנט:
ניתן לראות שדף האינטרנט משתנה לפיו הוגדרו נקודות השבירה ושאילתות המדיה.
סיכום
כדי להשתמש בהפסקת עיטור תיבה עם נקודות עצירה ושאילתות מדיה ב-Tailwind, ראשית, צור קובץ HTML. לאחר מכן, השתמש בנקודות השבירה ובשאילתות המדיה בתוכנית HTML על ידי ציון ערכים וסגנון שונים עבור גדלי מסך שונים. לאימות, הפעל את תוכנית ה-HTML וצפה בדף האינטרנט. מאמר זה הדגים את שיטת השימוש בהפסקת קישוט קופסאות עם נקודות שבירה ושאילתות מדיה.