Ιδιότητα outline-offset

Η ιδιότητα outline-offset ορίζει την απόσταση του εξωτερικού περιγράμματος - ενός συνόρου που δεν καταλαμβάνει χώρο. Ως τιμή της ιδιότητας μπορούν να χρησιμοποιηθούν οποιεσδήποτε μονάδες για μεγέθη, εκτός από τα ποσοστά. Προεπιλεγμένη τιμή: 0. Μια θετική τιμή μετατοπίζει το περίγραμμα προς τα έξω από το στοιχείο, μια αρνητική - προς τα μέσα.

Σύνταξη

επιλογέας {
	outline-offset: τιμή;
}

Παράδειγμα . Θετική τιμή

Το περίγραμμα απέχει από το στοιχείο (αυτό επισημαίνεται με φόντο):

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

#elem {
	outline-offset: 5px;
	outline-width: 1px;
	outline-style: solid;
	outline-color: black;
	background-color: #e4f1ed;
	width: 300px;
	height: 100px;
}

Παράδειγμα . Αρνητική τιμή

Το περίγραμμα βρίσκεται μέσα στο στοιχείο:

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

#elem {
	outline-offset: -10px;
	outline-width: 1px;
	outline-style: solid;
	outline-color: black;
	background-color: #e4f1ed;
	width: 300px;
	height: 100px;
}

Παράδειγμα . Αρνητική τιμή outline + border

Μπορείτε να δημιουργήσετε αυτό το ενδιαφέρον εφέ (παρατηρήστε το πάχος του λευκού κενού μεταξύ των συνόρων, είναι 10px, και όχι 14, καθώς ένα μέρος "φαγώθηκε" από το outline λόγω του πάχους του σε 4px):

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

#elem {
	outline-offset: -14px;
	outline: 4px solid green;
	border: 4px solid red;
	width: 300px;
	height: 100px;
}

Δείτε επίσης

η ιδιότητα outline-width,
που ορίζει το πάχος του περιγράμματος
η ιδιότητα outline-style,
που ορίζει το στυλ του περιγράμματος
η ιδιότητα outline-color,
που ορίζει το χρώμα του περιγράμματος
η ιδιότητα outline,
που είναι μια συντόμευση για τα περιγράμματα