Ιδιότητα border-image

Η ιδιότητα border-image ορίζει μια εικόνα για το περίγραμμα, είναι μια συντόμευση ιδιοτήτων για τις ιδιότητες border-image-source, border-image-slice, border-image-repeat, border-image-width και border-image-outset. Εντούτοις, η συντόμευση ιδιοτήτων εμφανίστηκε στην CSS νωρίτερα από τις ιδιότητες που συντομεύει και γι' αυτό υποστηρίζεται από περισσότερες παλιές προγραμμάτες περιήγησης.

Σύνταξη

επιλογέας {
	border-image: url(διαδρομή προς εικόνα) απόσταση/πλάτος/μετατόπιση επανάληψη;
}

Περιγραφή

Η εικόνα που θέλουμε να εφαρμόσουμε για το περίγραμμα, πρέπει να είναι διαμορφωμένη με ειδικό τρόπο: 4 μίνι εικόνες για τις γωνίες και 4 εικόνες για τις πλευρές. Παράδειγμα τέτοιας εικόνας:

Σε αυτήν την περίπτωση το κεντρικό μέρος έχει μείνει άσπρο (καθώς δεν θέλουμε να εμφανίζεται στο φόντο του στοιχείου). Παράδειγμα εικόνας με γεμισμένο κεντρικό μέρος:

Η τιμή slice υποδεικνύει στον πρόγραμμα περιήγησης, ποια μέρη της εικόνας θα πάνε στις γωνίες, και ποια στις πλευρές (και ποιο μέρος θα είναι κεντρικό). Στις γωνίες πάνε 4 μέρη, στις πλευρές πάνε 4 μέρη και ένα μέρος (το κεντρικό) πηγαίνει στο φόντο του στοιχείου (προαιρετικά, η λέξη-κλειδί fill).

Η εικόνα "κόβεται" σε κομμάτια με τον ακόλουθο τρόπο: για την τιμή slice ορίζεται από μία έως τέσσερις τιμές. Ας το εξετάσουμε με παράδειγμα. Ας υποθέσουμε ότι ορίζονται οι ακόλουθες τιμές: 10 20 30 40 (τα pixel px δεν ορίζονται, αυτό συμβαίνει επειδή η εικόνα μπορεί να είναι και raster και vector). Οι τιμές λένε το εξής: 10 να αποκοπεί από πάνω, 20 να αποκοπεί από τα δεξιά, 30 να αποκοπεί από κάτω, 40 να αποκοπεί από τα αριστερά. Ποιο μέρος της εικόνας θα πάει στην αριστερή πάνω γωνία; Θα είναι το κομμάτι: 10 από πάνω, 40 από αριστερά. Στη δεξιά πάνω γωνία θα πάει 10 από πάνω, 20 από τα δεξιά. Και ούτω καθεξής.

Συνήθως η εικόνα είναι συμμετρική (όπως τα ρόμβια παραπάνω) και χρειάζεται να αποκόψουμε ίσα κομμάτια για τις γωνίες. Σε αυτήν την περίπτωση ορίζεται μία τιμή, που θα ορίζει τις ίδιες αποστάσεις από όλες τις πλευρές. Για να αποκόψουμε τα πορτοκαλί ρόμβια, θα ορίσουμε slice σε 26 (εφόσον ο πορτοκαλί ρόμβος έχει μέγεθος 26px επί 26px). Οι κίτρινοι ρόμβοι θα πάνε στις γραμμές του περιγράμματος και θα συμβεί το εξής: είτε θα τεντωθούν σε ολόκληρο το μπλοκ είτε θα επαναλαμβάνονται κατά μήκος του περιγράμματος (εξαρτάται από την τιμή repeat):

<div id="elem"></div>

#elem {
	border-image-source: url("image.png");
	border-image-slice: 26;
	border-image-repeat: stretch;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

<div id="elem"></div>

#elem {
	border-image-source: url("image.png");
	border-image-slice: 26;
	border-image-repeat: repeat;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

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

Οι χρήστες παλαιών προγραμμάτων περιήγησης (ή με απενεργοποιημένες εικόνες) θα δουν το τυπικό περίγραμμα, που ορίστηκε στο border, επομένως είναι λογικό να του ορίσουμε κατάλληλο στυλ και χρώμα.

Τιμές

Τιμή	Περιγραφή
url(Διαδρομή προς εικόνα)	Διαδρομή προς την εικόνα. Για περισσότερες λεπτομέρειες δείτε `border-image-source`.
απόσταση	Υποδεικνύει στον πρόγραμμα περιήγησης, ποια μέρη της εικόνας θα πάνε στις γωνίες, και ποια στις πλευρές (και ποιο μέρος θα είναι κεντρικό). Πιθανές τιμές: από `1` έως `4` αριθμούς \| από `1` έως `4` ποσοστά. Μέσω κενού μπορεί να οριστεί η λέξη-κλειδί `fill` επιπλέον στους αριθμούς ή τα ποσοστά. Για περισσότερες λεπτομέρειες δείτε `border-image-slice`.
πλάτος	Η ιδιότητα ελέγχει το πλάτος του ορατού μέρους του πλαισίου, το κλιμακώνει. Εάν αυτή η τιμή είναι μεγαλύτερη από το πλάτος του `border-width`, η εικόνα του πλαισίου θα εισχωρήσει κάτω από το περιεχόμενο. Πιθανές τιμές: Μονάδες CSS \| ποσοστά \| αριθμός \| `auto`. Για περισσότερες λεπτομέρειες δείτε `border-image-width`.
μετατόπιση	Ενδιαφέρουσα ιδιότητα, που επιτρέπει να μετακινήσουμε το πλαίσιο έξω από τα όρια του στοιχείου. Δεν υποστηρίζονται αρνητικές τιμές. Πιθανές τιμές: Μονάδες CSS (εκτός από % (?)) \| θετικός αριθμός \| auto. Για περισσότερες λεπτομέρειες δείτε `border-image-outset`.
επανάληψη	Υποδεικνύει πώς να επαναλαμβάνεται η εικόνα στα περιγράμματα (όχι στις γωνίες): να πλακοστρωθεί ή να τεντωθεί. Πιθανές τιμές: `stretch` \| `repeat` \| `round` \| `space`. Για περισσότερες λεπτομέρειες δείτε `border-image-repeat`.

Προεπιλεγμένη τιμή: none 100%/1/0 stretch (url(διαδρομή προς εικόνα) απόσταση/πλάτος/μετατόπιση επανάληψη).

Παράδειγμα . border-image-repeat: τιμή repeat

<div id="elem"></div>

#elem {
	border-style: solid;
	border-width: 26px;
	border-image: url("image.png") 26 repeat;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Παράδειγμα . border-image-repeat: τιμή stretch

<div id="elem"></div>

#elem {
	border-style: solid;
	border-width: 26px;
	border-image: url("image.png") 26 stretch;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Παράδειγμα . border-image-repeat: τιμή round

Τώρα σε κανονική κατάσταση είναι ορισμένη η τιμή repeat, ενώ upon hover - round. Παρατηρήστε ότι πριν το hover στο περίγραμμα χωράει όχι ακέραιος αριθμός ρόμβων, ενώ μετά το hover - ακέραιος. Έτσι λειτουργεί το round:

<div id="elem"></div>

#elem:hover {
	border-image: url("image.png") 26 round;
}
#elem {
	border-style: solid;
	border-width: 42px;
	border-image: url("image.png") 26 repeat;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Παράδειγμα . border-image-repeat: δύο λέξεις

Τιμή repeat για πλάτος και stretch για ύψος:

<div id="elem"></div>

#elem {
	border-style: solid;
	border-width: 26px;
	border-image: url("image.png") 26 repeat stretch;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Παράδειγμα . Ταύτιση πλάτους εικόνας με πλάτος περιγράμματος

Ας αυξήσουμε το border-width upon hover του ποντικιού, ενώ το πάχος του border-image το αφήνουμε το ίδιο. Οι ρόμβοι θα τεντωθούν σε ολόκληρο το περίγραμμα:

<div id="elem"></div>

#elem:hover {
	border-width: 52px;
}
#elem {
	border-style: solid;
	border-width: 26px;
	border-image: url("image.png") 26 repeat;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Παράδειγμα . border-image-slice

Ας πάρουμε μια άλλη εικόνα, στην οποία τα διαφορετικά κομμάτια δεν είναι ίσα:

Ας ορίσουμε, ποια μέρη από την εικόνα πρέπει να αποκοπούν - 25% 30% 10% 20%. Λειτουργεί έτσι: 25% - απόσταση από πάνω, 30% - απόσταση από τα δεξιά, 10% - απόσταση από κάτω, 20% - απόσταση από τα αριστερά. Ουσιαστικά με αυτά τα κομμάτια αποκόπτουμε τις γωνίες. Η πάνω αριστερή γωνία θα είναι 25% από πάνω της εικόνας, και 20% από αριστερά. Η πάνω δεξιά γωνία θα είναι 25% από πάνω της εικόνας, και 30% από τα δεξιά και ούτω καθεξής.

Επίσης, εάν φέρετε το ποντίκι πάνω από το μπλοκ, τότε ενεργοποιείται η λέξη-κλειδί fill, και το κεντρικό μέρος της εικόνας θα γίνει το φόντο του μπλοκ μας:

<div id="elem"></div>

#elem:hover {
	border-image: url("image.png") fill 25% 30% 10% 20% stretch;
}
#elem {
	border-style: solid;
	border-width: 52px;
	border-image: url("image.png") 25% 30% 10% 20% stretch;
	width: 200px;
	height: 200px;
	margin: 0 auto;
}

Παράδειγμα

Ας φτιάξουμε ένα διαβαθμισμένο περίγραμμα χρησιμοποιώντας μια γραμμική διαβάθμιση:

<div id="elem"></div>

#elem {
	background: green;
	border-image: linear-gradient(to bottom, red, blue) 30;
	border-width: 30px;
	border-style: solid;
	width: 200px;
	height: 200px;
	margin: 0 auto;
}

Παράδειγμα . border-image-width

Ας ορίσουμε την τιμή border-image-width σε 2 (η εικόνα του περιγράμματος θα γίνει 2 φορές μεγαλύτερη από το ίδιο το περίγραμμα) upon hover του ποντικιού πάνω στο στοιχείο (26/2 - ορίστηκε μετά την κάθετο, ενώ 26 - αυτή είναι η τιμή του border-image-slice). Παρατηρήστε ότι το ίδιο το περίγραμμα δεν αυξήθηκε, αλλά η εικόνα του περιγράμματος - ναι, καθώς θα εισχωρήσει κάτω από το κείμενο:

<div id="elem"></div>

#elem:hover {
	border-image: url("image.png") 26/2 repeat;
}
#elem {
	border-style: solid;
	border-width: 26px;
	border-image: url("image.png") 26 repeat;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Παράδειγμα . border-image-outset

Ας ορίσουμε την τιμή border-image-outset σε 3 upon hover του ποντικιού πάνω στο στοιχείο. (26/1/2 - ορίστηκε μετά την δεύτερη κάθετο, ενώ 26 - αυτή είναι η τιμή του border-image-slice, και - 1 - border-image-width):

<div id="elem"></div>

#elem:hover {
	border-image: url("image.png") 26/1/3 repeat;
}
#elem {
	border-style: solid;
	border-width: 26px;
	border-image: url("image.png") 26 repeat;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Δείτε επίσης

ιδιότητα border-image-source,
που ορίζει τη διαδρομή προς την εικόνα για το περίγραμμα
ιδιότητα border-image-slice,
που ορίζει την κατάτμηση της εικόνας για το περίγραμμα
ιδιότητα border-image-repeat,
που ορίζει την επανάληψη της εικόνας για το περίγραμμα
ιδιότητα border-image-width,
που ορίζει το μέγεθος της εικόνας για το περίγραμμα
ιδιότητα border-image-outset,
που ορίζει τη μετατόπιση της εικόνας για το περίγραμμα