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

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

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

Σύνταξη

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

Τιμές

Τιμή	Περιγραφή
CSS μονάδες	Τιμή σε καθορισμένες CSS μονάδες.
Ποσοστά	Τιμές σε ποσοστά σε σχέση με το μέγεθος του μπλοκ στο οποίο έχει οριστεί το περίγραμμα.
Αριθμός	Αριθμητική τιμή, με την οποία πολλαπλασιάζεται η `border-width`.
`auto`	Λέξη-κλειδί. Εάν οριστεί, η τιμή είναι ίση με την αντίστοιχη `border-image-slice`. Εάν δεν υπάρχει κατάλληλο μέγεθος, χρησιμοποιείται η τιμή `border-width`, ενώ η εικόνα γεμίζει όλη τη γωνία του περιγράμματος, σπρώχνοντας κάτω από το περιεχόμενο. Δείτε τα παραδείγματα για καλύτερη κατανόηση.

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

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

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

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

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

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

#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% από το μέγεθος του μπλοκ (δηλαδή τα δύο περιγράμματα, το δεξί και το αριστερό, θα καλύψουν ολόκληρο το μπλοκ):

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

#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% από το μέγεθος του μπλοκ:

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

#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 όταν το ποντίκι περνάει πάνω από το στοιχείο:

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

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

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

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

Δείτε επίσης

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