Η outline-offsetιδιότητα στο CSS αντισταθμίζει ένα καθορισμένο περίγραμμα από την άκρη του περιγράμματος ενός στοιχείου κατά ένα καθορισμένο ποσό. Ένα περίγραμμα, το οποίο διαφέρει από ένα περίγραμμα, δεν καταλαμβάνει χώρο στη σελίδα (όπως ένα απόλυτα τοποθετημένο στοιχείο), ώστε το περίγραμμα να μπορεί να αντισταθμιστεί σε οποιοδήποτε ποσό και δεν θα επηρεάσει τη θέση ή τη διάταξη των γύρω στοιχείων.
.example ( outline: solid 2px blue; outline-offset: 10px; )Τα περιγράμματα που ορίζονται χρησιμοποιώντας την outlineιδιότητα χρησιμοποιούνται συχνά ως δακτύλιοι εστίασης, για προσβασιμότητα. Έτσι, η outline-offsetιδιότητα σάς επιτρέπει να αλλάξετε τη θέση του δακτυλίου εστίασης.
Αξίες
outline-offset δέχεται ένα είδος αξίας, ένα μήκος, το οποίο μπορεί να είναι:
0(η προεπιλεγμένη)- Οποιοδήποτε άλλο έγκυρο μήκος με καθορισμένη μονάδα (συμπεριλαμβανομένων αρνητικών τιμών)
Σημειώστε ότι outline-offset, όπως outline-width, δεν δέχεται ποσοστιαίες τιμές.
Θέση του περιγράμματος
Από προεπιλογή, το περίγραμμα ενός στοιχείου σχεδιάζεται αμέσως έξω από τα σύνορα (ή αμέσως έξω από το σημείο όπου το περίγραμμα θα είχε σχεδιαστεί εάν οριζόταν ένα περίγραμμα). Επομένως, είναι τεχνικά δυνατό να συνδυαστεί το περίγραμμα και το περίγραμμα για ένα αποτέλεσμα δύο συνόρων:
Από εκεί, outline-offsetμπορεί να χρησιμοποιηθεί για να αλλάξει τη θέση του περιγράμματος σε σχέση με το άκρο του περιγράμματος. Δοκιμάστε την παρακάτω επίδειξη που σας επιτρέπει να αλλάξετε διαδραστικά την τιμή μετατόπισης του περιγράμματος χρησιμοποιώντας το ρυθμιστικό. Η τιμή της μετατόπισης εμφανίζεται στη σελίδα καθώς μετακινείτε το ρυθμιστικό:
Όπως αναφέρθηκε παραπάνω, outline-offsetδέχεται αρνητικές τιμές, οι οποίες θα αντισταθμίσουν το περίγραμμα προς την αντίθετη κατεύθυνση (προς το κέντρο του στοιχείου), όπως φαίνεται στην επόμενη διαδραστική επίδειξη. Παρατηρήστε ότι το περίγραμμα ξεκινά από -40 εικονοστοιχεία:
Εάν δείτε την παραπάνω επίδειξη στον Firefox, θα παρατηρήσετε ότι το περίγραμμα φαίνεται σωστό στην αρχή, αλλά όταν ρυθμιστεί το ρυθμιστικό, το περίγραμμα δεν αποδίδεται ομαλά και καταλήγει σε λάθος θέση. Η κύλιση του στοιχείου εκτός θέασης και, στη συνέχεια, στην προβολή, αναγκάζει το πρόγραμμα περιήγησης να ξαναβάψει το περίγραμμα στη σωστή θέση. Αυτό φαίνεται να είναι ένα σφάλμα μόνο του Firefox.
Όχι μέρος του outlineShorthand
Παρόμοια με την borderιδιοκτησία, η outlineιδιοκτησία είναι μια συντομογραφία που αντιπροσωπεύει τρεις ιδιότητες: outline-color, outline-styleκαι outline-width.
Η outline-offsetιδιότητα, επομένως, δεν αντιπροσωπεύεται σε αυτήν ή οποιαδήποτε άλλη στενή ιδιότητα, επομένως πρέπει να δηλωθεί ξεχωριστά από το ίδιο το καθορισμένο περίγραμμα.
Σχετιζομαι με
- περίγραμμα
- σύνορο
Περισσότερες πληροφορίες
- περίγραμμα-μετατόπιση στο W3C
Υποστήριξη προγράμματος περιήγησης
Αυτά τα δεδομένα υποστήριξης του προγράμματος περιήγησης προέρχονται από την Caniuse, η οποία έχει περισσότερες λεπτομέρειες. Ένας αριθμός υποδεικνύει ότι το πρόγραμμα περιήγησης υποστηρίζει τη λειτουργία σε αυτήν την έκδοση και νεότερη.
Επιφάνεια εργασίας
| Χρώμιο | Firefox | ΙΕ | Ακρη | Σαφάρι |
|---|---|---|---|---|
| 4 | 2 | 11 | 15 | 3.1 |
Κινητό / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 2.1 | 3.2 |
Ο «μερικός» δείκτης για το IE σημαίνει ότι το IE δεν υποστηρίζει outline-offset, αλλά υποστηρίζει το outlineστενό και τις τρεις ιδιότητες που αντιπροσωπεύει.
Εκτός από το σφάλμα που αναφέρεται παραπάνω στην ενότητα "Θέση του περιγράμματος", υπάρχει ένα σφάλμα στον Firefox όπου το περίγραμμα σχεδιάζεται εσφαλμένα εάν το στοιχείο έχει ένα θυγατρικό στοιχείο που ξεχειλίζει το γονικό όριο (π.χ. χρησιμοποιώντας αρνητικά περιθώρια ή απόλυτη τοποθέτηση) . Επομένως, η outline-offsetτιμή θα είναι σχετική με το εκτεταμένο όριο που δημιουργείται από το παιδί που ξεχειλίζει, αντί για τα αρχικά όρια γονικού στοιχείου. Για να το κατανοήσετε καλύτερα, δείτε αυτό το CodePen, αυτό το νήμα Stack Overflow και αυτήν την αναφορά σφαλμάτων (πίστωση στον αναγνώστη Matt Vanes για αποστολή αυτού του σφάλματος).