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

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

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

Σύνταξη

επιλογέας {
	border-image-outset: θετικός αριθμός;
}

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

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

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

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

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

Θέτουμε την τιμή border-image-outset σε 30px κατά την επάνδρωση του ποντικιού πάνω στο στοιχείο. Σε αυτήν την περίπτωση, το περίγραμμα θα μετακινηθεί 30px:

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

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

Δείτε επίσης

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