Στο Tailwind CSS, το ' κουτί-στολισμός-διάλειμμα Η ιδιότητα ' καθορίζει την απόδοση του φόντου, του περιγράμματος και της συμπλήρωσης ενός στοιχείου όταν εκτείνεται σε πολλές γραμμές ή στήλες. Έχει δύο κατηγορίες, δηλ. φέτα ' και ' κλώνος '. Οι χρήστες μπορούν να χρησιμοποιήσουν την ιδιότητα 'box-decoration-break' με σημεία διακοπής και ερωτήματα μέσων για να καθορίσουν πώς αλλάζει η διάταξη και η εμφάνιση των στοιχείων ανάλογα με το πλάτος της συσκευής και να εφαρμόσουν διαφορετικά στυλ με βάση τα σημεία διακοπής.
Αυτό το άρθρο θα παρουσιάσει τη μέθοδο χρήσης του διαλείμματος διακόσμησης κουτιών με σημεία διακοπής και ερωτήματα μέσων.
Πώς να χρησιμοποιήσετε το Break Decoration Box With Breakpoints και τα ερωτήματα πολυμέσων στο Tailwind;
Για να χρησιμοποιήσετε ένα διάλειμμα διακόσμησης κουτιού με σημεία διακοπής και ερωτήματα μέσων, απαιτείται να ορίσετε διαφορετικές τιμές και στυλ για διαφορετικά μεγέθη οθόνης στο πρόγραμμα 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 />
Linux < br />
Ιχνος
σπιθαμή >
σώμα >
Εδώ:
- ' bg-teal-600 ” θέτει το γαλαζοπράσινο χρώμα στο φόντο.
- ' κουτί-διακόσμηση-κλώνος ” είναι μια προσαρμοσμένη κατηγορία που χρησιμοποιείται για κλωνοποίηση διακόσμησης κουτιών.
- ' md:bg-κίτρινο-500 ' εφαρμόζει ένα κίτρινο χρώμα φόντου στο στοιχείο για το ' md ” σημείο διακοπής (οθόνες μεσαίου μεγέθους).
- ' lg:box-decoration-slice ” θέτει ένα εφέ κοπής στη διακόσμηση του κουτιού για το “ lg ” σημείο διακοπής (μεγάλες οθόνες).
- ' κείμενο-λευκό ” ορίζει το λευκό χρώμα στο κείμενο.
- ' κείμενο-3xl ” ορίζει το μέγεθος της γραμματοσειράς σε 3xl.
- ' px-2 ” προσθέτει μια οριζόντια επένδυση 2 pixel στο στοιχείο .
Βήμα 2: Επαλήθευση εξόδου
Για να βεβαιωθείτε ότι τα σημεία διακοπής και τα ερωτήματα πολυμέσων έχουν εφαρμοστεί με επιτυχία, εκτελέστε το πρόγραμμα HTML και προβάλετε την ιστοσελίδα:
Μπορεί να φανεί ότι η ιστοσελίδα αλλάζει σύμφωνα με την οποία ορίστηκαν τα σημεία διακοπής και τα ερωτήματα πολυμέσων.
συμπέρασμα
Για να χρησιμοποιήσετε ένα διάλειμμα διακόσμησης κουτιού με σημεία διακοπής και ερωτήματα πολυμέσων στο Tailwind, πρώτα, δημιουργήστε ένα αρχείο HTML. Στη συνέχεια, χρησιμοποιήστε τα σημεία διακοπής και τα ερωτήματα πολυμέσων στο πρόγραμμα HTML, καθορίζοντας διαφορετικές τιμές και στυλ για διαφορετικά μεγέθη οθόνης. Για επαλήθευση, εκτελέστε το πρόγραμμα HTML και προβάλετε την ιστοσελίδα. Αυτό το άρθρο έχει δείξει τη μέθοδο χρήσης διακοπής διακόσμησης κουτιών με σημεία διακοπής και ερωτήματα πολυμέσων.