Περίγραμμα - CSS-Κόλπα

Η outlineιδιότητα στο CSS σχεδιάζει μια γραμμή γύρω από το εξωτερικό ενός στοιχείου. Είναι παρόμοιο με το περίγραμμα εκτός από το ότι:

1. Πάντα πηγαίνει γύρω από όλες τις πλευρές, δεν μπορείτε να καθορίσετε συγκεκριμένες πλευρές
2. Δεν είναι μέρος του μοντέλου κουτιού, οπότε δεν θα επηρεάσει τη θέση του στοιχείου ή των παρακείμενων στοιχείων (ωραίο για εντοπισμό σφαλμάτων!)

Άλλα δευτερεύοντα γεγονότα περιλαμβάνουν ότι δεν σέβεται την ακτίνα των συνόρων (έχει νόημα υποθέτω ότι δεν είναι περίγραμμα) και ότι δεν είναι πάντα ορθογώνιο. Εάν το περίγραμμα περιστρέφεται γύρω από ένα ενσωματωμένο στοιχείο με διαφορετικά μεγέθη γραμματοσειρών, για παράδειγμα, η Όπερα θα σχεδιάσει ένα κλιμακωτό πλαίσιο γύρω από όλα.

Χρησιμοποιείται συχνά για λόγους προσβασιμότητας, για να τονίσει έναν σύνδεσμο κατά την καρτέλα χωρίς να επηρεάζει τη θέση και με διαφορετικό τρόπο από το δείκτη.

a:focus ( outline: 1px dashed red; )

Στενογραφία

outline: ( || || ) | inherit

Παίρνει τις ίδιες ιδιότητες με το περίγραμμα, αλλά με το "περίγραμμα".

Το παραπάνω στενό θα μπορούσε να είχε γραφτεί:

a:focus ( outline-width: 1px; outline-style: dashed; outline-color: red; )

Σημειώσεις

• Δεν μπορείτε να ορίσετε ένα περίγραμμα μόνο σε μία (ή δύο ή τρεις) πλευρές των στοιχείων. Μόνο όλες οι πλευρές. Δεν υπάρχει τέτοιο πράγμα όπως outline-top, outline-right, outline-bottom, ή outline-leftόπως υπάρχει με border.
• Δοκιμάστε να ανοίξετε την κονσόλα σε οποιονδήποτε ιστότοπο και να εκτελέσετε document.head.insertAdjacentHTML("beforeend", "* ( outline: 1px solid red; )");- θα δείτε πολλές δομές ιστότοπων με αυτόν τον τρόπο.
• outlineχρησιμοποιείται για :focusστυλ από προεπιλογή. Θυμηθείτε αν καταργήσετε ποτέ outlineστυλ, όπως a:focus ( outline: 0; ), πρέπει να τα προσθέσετε ξανά χρησιμοποιώντας κάποιο άλλο είδος οπτικά διακριτού στυλ.

Περισσότερες πληροφορίες

• Έγγραφα MDN

Υποστήριξη προγράμματος περιήγησης

Χρώμιο	Σαφάρι	Firefox	ΛΥΡΙΚΗ ΣΚΗΝΗ	ΙΕ	Android	iOS
Οποιος	1.2+	1.5+	7+	8+	Οποιος	3.1+