CSS offset-anchor attribute

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

offset-anchor Η ιδιότητα καθορίζει το στοιχείο να είναι σταθερό στο offset-path το σημείο στη διαδρομή που ορίζεται από την ιδιότητα.

Αν χρησιμοποιηθεί offset-rotate Η ιδιότητα γυρίζει το στοιχείο, τότε offset-anchor Ο σημείο που ορίζει η ιδιότητα επίσης θα γίνει κέντρο γύρω από το οποίο θα γυρίζει το στοιχείο.

Παράδειγμα

Καταστήστε τον δεξιό κέντρο του στοιχείου <img> σταθερό στη καθορισμένη διαδρομή:

img {
  offset-path: πът('M 50 80 C 150 -20 250 180 350 80');
  offset-anchor: δεξιά κέντρο;
}

Δοκιμάστε το προσωπικά

Γλώσσα CSS

offset-anchor: αυτόματα|τιμή|initial|κληρονομικότητα;

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

Τιμή Περιγραφή
αυτόματα Προεπιλεγμένη τιμή. Η αγκυρα βρίσκεται στο κέντρο του στοιχείου, ίση με την τιμή 50% 50%.
  • left top
  • left center
  • left bottom
  • right top
  • right center
  • right bottom
  • center top
  • center center
  • center bottom
 Αν καθοριστεί μόνο ένας κλειδί, η άλλη τιμή θα είναι "center".
xpos ypos

Η πρώτη τιμή είναι η οριζόντια θέση, η δεύτερη η κάθετη θέση.

Ο κορυφαίος αριστερός点是 0 0.

Η μονάδα μπορεί να είναι εικονοστοιχεία (0px 0px) ή οποιαδήποτε άλλη μονάδα CSS.

Αν καθοριστεί μόνο μια τιμή, η άλλη θα είναι 50%.

Μπορεί να χρησιμοποιηθούν τόσο το % όσο και οι θέσεις.
x% y%

Η πρώτη τιμή είναι η οριζόντια θέση, η δεύτερη η κάθετη θέση.

Ο κορυφαίος αριστερός点是 0% 0%. Ο κάτω δεξιός点是 100% 100%.

Αν καθοριστεί μόνο μια τιμή, η άλλη θα είναι 50%.

Η προεπιλεγμένη τιμή είναι: 50% 50%.
initial Αναθέστε αυτή την ιδιότητα στη προεπιλεγμένη της τιμή. Δείτε: initial.
κληρονομικότητα Κληρονομείται αυτή η ιδιότητα από το γονικό στοιχείο. Δείτε: κληρονομικότητα.

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

Προεπιλεγμένη τιμή: αυτόματα
Κληρονομικότητα: Όχι
Παραγωγή ανιμα: Υποστηρίζεται. Δείτε:Ιδιότητες αニμα.
Έκδοση: CSS3
Γλώσσα σύνταξης Ιαβασκρίντα: object.style.offsetAnchor="κάτω δεξιά"

Υποστήριξη περιηγητή

Τα αριθμήματα στην τράπεζα δείχνουν την έκδοση του πρώτου περιηγητή που υποστηρίζει την ιδιότητα.

Κρόμεω Εντζ Φάιρφξεξ Σαφάρι Οπερα
116 116 72 16 102

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

Εκμάθηση:SVG διαδρομή

Εκμάθηση:CSS κίνηση

Αναφορά:CSS offset attribute

Αναφορά:CSS offset-distance attribute

Αναφορά:CSS offset-path attribute

Αναφορά:CSS offset-position attribute

Αναφορά:CSS offset-rotate attribute