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

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

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

Σύνταξη

cssεπιλογέας {
  border-image-width: CSS μονάδες | ποσοστά | αριθμός | auto;
}

Τιμές

Προεπιλεγμένη τιμή: 1.

Παράδειγμα . Αριθμός

Ας ορίσουμε την τιμή border-image-width σε 2 όταν το ποντίκι περνάει πάνω από το στοιχείο. Σε αυτή την περίπτωση το περίγραμμα θα γίνει μεγέθους 26px*2 - 2 φορές μεγαλύτερο από το πλάτος του, που ορίστηκε στο border-width. Το περίγραμμα σε αυτή την περίπτωση θα μπει κάτω από το κείμενο (σαν φόντο):

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

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

Результат:

Παράδειγμα . Ας αλλάξουμε το border-image-repeat σε round

Στο προηγούμενο παράδειγμα, όταν το ποντίκι περνάει πάνω, στο περίγραμμα δεν θα υπάρχει ακέραιος αριθμός από ρόμβους. Ας το διορθώσουμε ορίζοντας την border-image-repeat στην τιμή round:

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

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

Результат:

Παράδειγμα . Ποσοστά

Ας ορίσουμε την τιμή border-image-width σε 50% όταν το ποντίκι περνάει πάνω από το στοιχείο. Σε αυτή την περίπτωση το περίγραμμα θα γίνει μεγέθους 50% από το μέγεθος του μπλοκ (δηλαδή τα δύο περιγράμματα, το δεξί και το αριστερό, θα καλύψουν ολόκληρο το μπλοκ):

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

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

Результат:

Παράδειγμα . Ποσοστά

Ας ορίσουμε την τιμή border-image-width σε 30% όταν το ποντίκι περνάει πάνω από το στοιχείο. Σε αυτή την περίπτωση το περίγραμμα θα γίνει μεγέθους 30% από το μέγεθος του μπλοκ:

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

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

Результат:

Παράδειγμα . Pixels

Ας ορίσουμε την τιμή border-image-width σε 50px όταν το ποντίκι περνάει πάνω από το στοιχείο:

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

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

Результат:

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

Ας ορίσουμε την τιμή border-image-width σε auto όταν το ποντίκι περνάει πάνω από το στοιχείο.

Πριν από το πέρασμα του ποντικιού, η border-image-width έχει τιμή 1 (από προεπιλογή). Στο παράδειγμα ειδικά η border-width ορίστηκε σε 52px, και η border-image-slice - στην τιμή 26 (το φαινόμενο με το auto θα παρατηρηθεί μόνο εάν η border-width δεν είναι ίση με την border-image-slice). Εξαιτίας του ότι η border-image-width έχει τιμή 1, η εικόνα του περιγράμματος θα καταλαμβάνει όλο το πλάτος της border-width, δηλαδή θα εκταθεί στα 52px. Κατά το πέρασμα του ποντικιού η τιμή border-image-width θα οριστεί σε auto και το πλάτος της εικόνας θα γίνει ίσο με την τιμή της border-image-slice, δηλαδή 26px:

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

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

Результат:

Δείτε επίσης