Ιδιότητα border-image-slice

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

Για πιο λεπτομερή πληροφόρηση δείτε την ιδιότητα border-image.

Σύνταξη

<+css+> επιλογέας { border-image-slice: από 1-ο έως 4-ους αριθμούς | από 1-ο έως 4-ους ποσοστά; } <-css->

Με αριθμούς και ποσοστά μέσω κενικού μπορεί να υπάρχει η λέξη-κλειδί fill.

Τιμές

Τιμή	Περιγραφή
ποσοστά	Τα ποσοστά υπολογίζονται σε σχέση με το μέγεθος της εικόνας. Οριζόντια σε σχέση με το πλάτος, κάθετα — σε σχέση με το ύψος.
αριθμοί	Οι αριθμοί - είναι pixels (για εικόνα raster) ή συντεταγμένες (για vector). Οι μονάδες μέτρησης δεν υποδεικνύονται.
`fill`	Η προεπιλεγμένη συμπεριφορά προϋποθέτει ότι το κεντρικό μέρος της εικόνας θα απορριφθεί. Για να το χρησιμοποιήσετε, πρέπει να χρησιμοποιήσετε την λέξη-κλειδί `fill` επιπλέον στους αριθμούς ή ποσοστά.

Αριθμός παραμέτρων

Η απόσταση μπορεί να πάρει 1, 2, 3 ή 4 παραμέτρους. Παρακαλώ σημειώστε ότι οι μονάδες μέτρησης για την απόσταση δεν γράφονται (για παράδειγμα, απλώς 20, και όχι 20px). Επίσης μπορείτε να ορίσετε το πάχος σε %.

Αριθμός παραμέτρων	Περιγραφή
`1`	Πάχος για όλες τις πλευρές ταυτόχρονα.
`2`	1 2; - `1px` για πάνω και κάτω, `2px` για αριστερά και δεξιά.
`3`	`1 2 3`; - `1px` για πάνω, `2px` για αριστερά και δεξιά, `3px` για κάτω.
`4`	`1 2 3 4`; - `1px` για πάνω, `2px` για δεξιά, `3px` για κάτω, `4px` για αριστερά.

Προεπιλεγμένη τιμή: 100%(?).

Παράδειγμα

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

#elem {
	border-image-source: url("image.png");
	border-image-slice: 26;
	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-image-source,
που ορίζει τη διαδρομή προς την εικόνα για το περίγραμμα
ιδιότητα border-image-repeat,
που ορίζει την επανάληψη εικόνας για το περίγραμμα
ιδιότητα border-image-width,
που ορίζει το μέγεθος εικόνας για το περίγραμμα
ιδιότητα border-image-outset,
που ορίζει τη μετατόπιση εικόνας για το περίγραμμα