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

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

Σύνταξη

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

Τιμές

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

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

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

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

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

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

css#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

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

css#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:

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

css#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 για το ύψος:

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

css#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,
που ορίζει τη μετατόπιση εικόνας για το περίγραμμα