Κουτί-διακόσμηση-διάλειμμα - CSS-Κόλπα

Η box-decoration-breakιδιότητα σάς επιτρέπει να ελέγχετε τον τρόπο με τον οποίο σχεδιάζονται οι διακοσμήσεις κουτιών στα θραύσματα ενός «σπασμένου» στοιχείου. Ένα στοιχείο μπορεί να χωριστεί σε τμήματα στο τέλος μιας γραμμής, σε στήλες ή σε αλλαγές σελίδας.

.module ( box-decoration-break: clone; )

Το παράθυρο ιδιοτήτων διακόσμηση ελέγχεται από box-decoration-breakείναι: background(και υπο-ιδιότητες), border, border-radius, border-image, box-shadow, margin, και padding.

Αξίες

slice: η αρχική τιμή. Οι διακοσμήσεις κουτιών εφαρμόζονται στο στοιχείο στο σύνολό τους και σπάζουν στις άκρες των θραυσμάτων στοιχείων.
clone: οι διακοσμήσεις εφαρμόζονται σε κάθε θραύσμα του στοιχείου σαν τα θραύσματα να είναι αδιάσπαστα, μεμονωμένα στοιχεία. Τα περιγράμματα τυλίγουν τις τέσσερις άκρες κάθε θραύσματος του στοιχείου και τα φόντα επανασχεδιάζονται πλήρως για κάθε θραύσμα.

Χρήση

box-decoration-break μπορεί να βοηθήσει στη διατήρηση μιας συνεπούς σχεδίασης μεταξύ των θραυσμάτων ενός σπασμένου στοιχείου

Σε αυτό το παράδειγμα εικόνας, μια παράγραφος με πορτοκαλί περίγραμμα και άνω περιθώριο 1em διασπάται σε δύο στήλες. Η πρώτη παράγραφος έχει την αρχική box-decoration-breakτιμή του slice. Η κάτω παράγραφος έχει την cloneτιμή.

Άρθρο και επίδειξη αυτού.

Διαδήλωση

Η box-decoration-breakιδιοκτησία διαθέτει περιορισμένη υποστήριξη προγράμματος περιήγησης. Αυτή η επίδειξη λειτουργεί καλύτερα στον Firefox 37+, όπου box-decoration-breakυποστηρίζεται πλήρως.

Δείτε το στυλό 1074b03653ffb32b88a6f88823c3de34 από CSS-Tricks (@ css-tricks) στο CodePen.

Υποστήριξη προγράμματος περιήγησης

Τη στιγμή αυτής της γραφής, μόνο ο Firefox υποστηρίζει πλήρως box-decoration-break. Τα προγράμματα περιήγησης Webkit και η Opera υποστηρίζουν εν μέρει box-decoration-breakσε ενσωματωμένα στοιχεία σε αλλαγές γραμμής, αλλά όχι σε αλλαγές στηλών ή σελίδων.