Περίγραμμα-εικόνα - CSS-Κόλπα

border-image είναι μια στενή ιδιότητα που σας επιτρέπει να χρησιμοποιήσετε μια εικόνα ή μια διαβάθμιση CSS ως το περίγραμμα ενός στοιχείου.

.module ( border-image: url(border.png.webp) 25 25 round; )

Η border-imageιδιότητα μπορεί να εφαρμοστεί σε οποιοδήποτε στοιχείο, εκτός από στοιχεία εσωτερικού πίνακα (π.χ. tr, th, td) όταν border-collapseέχει οριστεί σε collapse.

Ιδιότητες

Η μόνη απαιτούμενη ιδιότητα για το border-imageστενό είναι border-image-source. Οι άλλες ιδιότητες είναι προεπιλεγμένες στις αρχικές τους τιμές, εάν δεν προσδιορίζονται Αυτές είναι οι border-imageιδιότητες με τη σειρά:

`border-image-source`

.module ( border-image-source: url(border.png.webp); )

Αυτή η ιδιότητα καθορίζει την πηγή για την εικόνα περιγράμματος. Αυτό μπορεί να είναι ένα URL, URI δεδομένων, διαβάθμιση CSS ή ενσωματωμένο SVG (αν και η υποστήριξη είναι περιορισμένη για ενσωματωμένο SVG, δείτε τις σημειώσεις χρήσης SVG).

Η αρχική τιμή είναι none.

`border-image-slice`

.module ( border-image-source: url(border.png.webp); border-image-slice: 20; )

Οι τιμές αυτής της ιδιότητας λένε στο πρόγραμμα περιήγησης πού να «κόψει» την εικόνα για να δημιουργήσει τα κομμάτια του περιγράμματος. Η εικόνα χωρίζεται σε 9 τμήματα - τις τέσσερις γωνίες, τις τέσσερις πλευρές και το κέντρο.

Οκτώ καρδιές σε μια εικόνα "καρέ", μεγεθυμένη για να δείξει λεπτομέρεια. Οι κόκκινες γραμμές δείχνουν φέτες.

Αν νομίζετε ότι ακούγεται παράλογο, είστε σε καλή παρέα. Υπήρξε μια μακρά συζήτηση του θέματος στο blog του Eric Myer πριν από λίγα χρόνια, όπου ζούσαν πολλά μεγάλα έργα frontend

Σε αυτό το demo, μια καρδιά επαναλαμβάνεται γύρω από τα σύνορα του div. Η border-image-sourceεικόνα είναι μια σύνθετη εικόνα οκτώ από το ίδιο εικονίδιο καρδιάς, κομμένο έτσι ώστε το πλήρες σχήμα καρδιάς να χρησιμοποιείται σε κάθε πλευρά του στοιχείου.

Δείτε την επίδειξη Pen περίγραμμα-εικόνας: περίγραμμα εικονιδίων από CSS-Tricks (@ css-tricks) στο CodePen.

Περισσότερες σημειώσεις χρήσης

Αν και η υποστήριξη για border-imageέχει βελτιωθεί - υποστηρίζεται μη προκαθορισμένη σε όλες τις τρέχουσες εκδόσεις του προγράμματος περιήγησης - ο καθορισμός εναλλακτικού borderστυλ εξακολουθεί να αξίζει τον κόπο. Το εφεδρικό περίγραμμα θα εμφανίζεται σε προγράμματα περιήγησης που δεν υποστηρίζουν border-imageή εάν η εικόνα δεν φορτωθεί.

Σε αντίθεση με ορισμένες από τις άλλες ιδιότητες περιγράμματος, border-imageδεν μπορεί να είναι κινούμενη. Δεν μπορεί επίσης να διαμορφωθεί border-radius.

Εάν δηλώσετε ένα border-image-sourceκαι ένα borderπλάτος ή border-image-widthχωρίς φέτες, ολόκληρη η εικόνα χωρίς θέση θα τοποθετηθεί στις τέσσερις γωνίες του στοιχείου, κλιμακωτή στο καθορισμένο πλάτος σας.

Σχετιζομαι με

border
border-collapse
box-sizing

Περισσότερες πληροφορίες

border-image στο CSS Background and Borders Module Level 3 CR
border-image στο MDN
border-image.com, αυτό το εργαλείο σάς επιτρέπει να ανεβάζετε μια εικόνα και να παίζετε με τις φέτες περιγράμματος μέχρι να τα πάρετε σωστά και στη συνέχεια δημιουργεί το CSS για εσάς.
Η εικόνα περιγράμματος εξηγείται από το Dudley Storey.

Περισσότερες επιδείξεις

Επίσης από το Dudley Storey, Πρακτική εικόνα περιγράμματος: αποκριτική κορνίζα, επίδειξη CodePen. Αυτό είναι ένα καλό παράδειγμα χρήσης μιας εικόνας περιγράμματος με λογικό τρόπο σε μια αποκριτική εικόνα. Παρατηρήστε ότι το "πλαίσιο" αφαιρείται σε μικρότερα μεγέθη οθόνης.
Αληθινά διάστικτα σύνορα χρησιμοποιώντας SVG και περίγραμμα-εικόνα, ένα στυλό του Lucas Lemonnier. Μια λύση για το άσχημο τετράγωνο "διάστικτο" περίγραμμα, αυτή η μέθοδος σας δίνει πραγματικές στρογγυλές κουκίδες!
κουμπί διαβάθμισης, ένα στυλό από τον CodePen χρήστη GSSxGSS. Ένα όμορφο παράδειγμα γραμμικής κλίσης ως εικόνα περιγράμματος.
Film Strip, ένα στυλό του Nick Pettit. Ίσως όχι το πιο πρακτικό demo, αυτό είναι ένα διασκεδαστικό, τέλειο παράδειγμα του τι μπορείτε να κάνετε border-image.

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

border-imageαρχικά απαιτούσαν προθέματα προμηθευτών σε όλα τα προγράμματα περιήγησης που το υποστήριξαν. Τώρα λειτουργεί μη προκαθορισμένο στην τελευταία έκδοση όλων των προγραμμάτων περιήγησης. Αυτός ο πίνακας δείχνει τόσο την παλαιότερη προκαταρκτική υποστήριξη όσο και την πρώτη μη προκαθορισμένη υποστήριξη, όπου ισχύει.