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

Η ιδιότητα border-image-repeat ορίζει τον τρόπο επανάληψης του εσωτερικού μέρους του περιγράμματος σε μορφή εικόνας. Για πιο λεπτομερή πληροφορίες δείτε την ιδιότητα border-image.

Σύνταξη

επιλογέας {
	border-image-repeat: stretch | repeat | round;
}

Τιμές

Αριθμός παραμέτρων	Περιγραφή
`stretch`	Τεντώνει το σχέδιο του περιγράμματος στα μεγέθη του στοιχείου. Αυτή η τιμή χρησιμοποιείται από προεπιλογή.
`repeat`	Επαναλαμβάνει το σχέδιο του περιγράμματος.
`round`	Επαναλαμβάνει το σχέδιο και το κλιμακώνει έτσι ώστε στην πλευρά του στοιχείου να υπάρχει ακέραιος αριθμός εικόνων.

Τιμή από προεπιλογή: stretch.

Πλήθος παραμέτρων

Μπορεί να πάρει 1 ή 2 παραμέτρους. Εάν δοθούν δύο παράμετροι, τότε η πρώτη από αυτές θα είναι για το πάνω και το κάτω περίγραμμα, και η δεύτερη παράμετρος - για το αριστερό και το δεξί.

Παράδειγμα . Τιμή stretch

<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;
}

Παράδειγμα . Τιμή repeat

<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;
}

Παράδειγμα . Τιμή round

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

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

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

Παράδειγμα . Δύο λέξεις

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

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

#elem {
	border-image-repeat: repeat stretch;
	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;
}

Δείτε επίσης

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