CSS offset ιδιότητα

Ορισμός και χρήση

offset Η προσαρμογή χρησιμοποιείται για την κίνηση των στοιχείων κατά μήκος του διαδρόμου και είναι η συντομευμένη μορφή των παρακάτω προσαρμογών:

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

Παράδειγμα

Παράδειγμα 1

Χρήση offset Ακρόρρυθμος προσαρμογή για τη ρύθμιση των προσαρμογών offset-path, offset-distance και offset-rotate στο στοιχείο <img>:

img {
  offset: path('M 50 80 C 150 -20 250 180 350 80') 150px auto 45deg;
}

Προσπαθήστε το شخصικά

Παράδειγμα 2: offset-path και offset-rotate

Χρήση του στοιχείου <img> για offset Θέση των τιμών των προσαρμογών offset-path και offset-rotate:

img {
  offset: path('M 50 80 C 150 -20 250 180 350 80') 45deg;
}

Προσπαθήστε το شخصικά

Παράδειγμα 3: offset-path και offset-distance

Χρήση του στοιχείου <img> για offset Θέση των τιμών των προσαρμογών offset-path και offset-distance:

img {
  offset: παράδειγμα('M 50 80 C 150 -20 250 180 350 80') 150px;
}

Προσπαθήστε το شخصικά

Παράδειγμα 4: offset-path, offset-distance, offset-rotate και offset-anchor

Χρήση του στοιχείου <img> για offset Ρυθμίστε τις τιμές των ιδιοτήτων offset-path, offset-distance, offset-rotate και offset-anchor:

img {
  offset: παράδειγμα('M 50 80 C 150 -20 250 180 350 80') 150px -90deg / 0% 50%;
}

Προσπαθήστε το شخصικά

Γλώσσα CSS

offset: auto|value|initial|inherit;

Τιμή της ιδιότητας

Τιμή Περιγραφή
auto Προεπιλεγμένη. Δείτε την προεπιλεγμένη τιμή για κάθε μεμονωμένη 'offset-' ιδιότητα.
offset-anchor Ορίζει τον σημείο που θα είναι σταθερό στο στοιχείο κατά μήκος της διαδρομής. Η προεπιλεγμένη τιμή είναι auto.
offset-distance Ορίζει τη απόσταση από την αρχή της διαδρομής που ορίζεται από το offset-path. Η προεπιλεγμένη τιμή είναι 0.
offset-path Ορίζει τη διαδρομή που θα ακολουθήσει το στοιχείο. Η προεπιλεγμένη τιμή είναι none.
offset-position Ορίζει την αρχική θέση του στοιχείου κατά μήκος της διαδρομής. Η προεπιλεγμένη τιμή είναι normal.
offset-rotate Ορίζει το γωνιακό βαθμό της κίνησης του στοιχείου κατά μήκος της διαδρομής. Η προεπιλεγμένη τιμή είναι auto.
initial Άλλαξτε αυτή την ιδιότητα στην προεπιλεγμένη τιμή. Δείτε: initial.
inherit Επιλέξτε αυτή την ιδιότητα από τον γονικό στοιχείο. Δείτε: inherit.

Τεχνικές λεπτομέρειες

Προεπιλεγμένη τιμή: Δείτε την προεπιλεγμένη τιμή για τις μεμονωμένες ιδιότητες
Προέλευση: Όχι
Προσθήκη κίνησης: Υποστήριξη. Δείτε:Αντικειμενικές ιδιότητες της κίνησης.
Έκδοση: CSS3
Γλώσσα JavaScript: object.style.offset="παράδειγμα('M 50,250 C 700,-50 -400,-50 250,250') 200px auto 90deg"

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

Τα αριθμήματα στη τаблицή δείχνουν την έκδοση του προγράμματος περιήγησης που υποστηρίζει πλήρως το χαρακτηριστικό.

Chrome Edge Firefox Safari Opera
55 79 72 16 42

Σελίδες σχετικές

Διδασκαλία:SVG διαδρομή

Διδασκαλία:CSS κινούμενο

Αναφορά:CSS offset ιδιότητα

Αναφορά:CSS offset-anchor ιδιότητα

Αναφορά:CSS offset-distance ιδιότητα

Αναφορά:CSS offset-path ιδιότητα

Αναφορά:CSS offset-position ιδιότητα

Αναφορά:CSS offset-rotate ιδιότητα