CSS mask-origin attribute

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

mask-origin Η ιδιότητα καθορίζει τη θέση της αρχικής τοποθεσίας της εικόνας κουρτίνας (δηλαδή η περιοχή τοποθεσίας κουρτίνας).

Παράδειγμα

Παρουσίαση mask-origin Διαφορετικές τιμές της ιδιότητας:

.masked {
  background: green;
  border: 30px solid blue;
  padding: 20px;
  -webkit-mask-image: url(img_circle.svg);
  mask-image: url(img_circle.svg);
  mask-size: 50%;
  mask-repeat: no-repeat;
}
.mask1 {
  mask-origin: border-box;
}
.mask2 {
  mask-origin: content-box;
}
.mask3 {
  mask-origin: padding-box;
}
.mask4 {
  mask-origin: fill-box;
}

Προσπαθήστε να το δοκιμάσετε προσωπικά

Γλώσσα CSS

mask-origin: border-box|content-box|padding-box|fill-box|stroke-box|view-box|initial|inherit;

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

Τιμή Περιγραφή
border-box Θέση σε σχέση με την κουτίδα περιγράμματος των ορίων. Προεπιλεγμένη τιμή.
content-box Θέση σε σχέση με την κουτίδα περιγράμματος του περιεχομένου.
padding-box Θέση σε σχέση με την κουτίδα περιγράμματος του εσωτερικού.
fill-box Θέση σε σχέση με την κουτίδα περιγράμματος του αντικειμένου.
stroke-box Θέση σε σχέση με το περίγραμμα της κουτίδας περιγράμματος.
view-box Χρησιμοποιήστε τον πιο πρόσφατο SVG οπτικό κουτί ως πύργο αναφοράς.
initial Ρυθμίστε αυτή την ιδιότητα στην προεπιλεγμένη της τιμή. Δείτε: initial.
inherit Κληρονομείται αυτή η ιδιότητα από το γονικό στοιχείο. Δείτε: inherit.

Τεχνικά Στοιχεία

Προεπιλεγμένη τιμή: border-box
Κληρονομικότητα: Όχι
Προσαρμογή Αニματίας: Μη υποστηριζόμενο. Εξετάστε:Παράμετροι Αニματίας.
Έκδοση: Μονόλεπτο Μάσκας CSS Του Νiveaυ 1
Γλώσσα JavaScript: object.style.maskOrigin="padding-box"

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

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

Χρωμίου Ἔντέτζ Φάιρεξ Σαφάρι Ἄοπερα
120 120 53 15.4 106

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

Εκμάθηση:Μάσκα CSS

Αναφορά:CSS mask attribute

Αναφορά:CSS mask-clip attribute

Αναφορά:CSS mask-composite attribute

Αναφορά:CSS mask-image attribute

Αναφορά:CSS mask-mode attribute

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

Αναφορά:CSS mask-repeat attribute

Αναφορά:CSS mask-size attribute

Αναφορά:CSS mask-type attribute