CSS border-image-slice στοιχεία

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

Η ιδιότητα border-image-slice καθορίζει την εσωτερική απόκλιση της εικόνας του περιγράμματος.

Για περισσότερες πληροφορίες:

Εκμάθηση CSS3:CSS3 Περιφερειακή Γραμμή

Παράδειγμα

Καθορίζει την εσωτερική απόκλιση της εικόνας του περιγράμματος:

div
{
border-image-source: url(border.png);
border-image-slice: 50% 50%;
}

Γλώσσα γραφής CSS

border-image-slice: number|%|fill;

Σημειώσεις:Η ιδιότητα αυτή καθορίζει την εσωτερική απόκλιση των άκρων της εικόνας προς τα εσωτερικά, η εικόνα διαιρείται σε εννέα περιοχές: τα τέσσερα γωνία, τα τέσσερα πλευρά και μια μεσαία περιοχή. Αν δεν χρησιμοποιηθεί το λέξος fill, η μεσαία περιοχή της εικόνας θα απορριφθεί. Αν παραλειφθεί ο τέταρτος αριθμός/το ποσοστό, θα είναι ίδιος με τον δεύτερο. Αν παραλειφθεί ο τρίτος αριθμός, θα είναι ίδιος με τον πρώτο. Αν παραλειφθεί ο δεύτερος αριθμός, θα είναι ίδιος με τον πρώτο.

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

Τιμή Περιγραφή
number Αριθμητική τιμή, που αντιπροσωπεύει τους像素 της εικόνας (αν είναι ράστερ εικόνα) ή τις κεντρικές συντεταγμένες (αν είναι εικόνα κεντρικών συντεταγμένων).
% Ποσοστό απόλυτης διάστασης της εικόνας: Η πλάτος της εικόνας επηρεάζει την οριζόντια απόκλιση, η ύψος επηρεάζει την κάθετη απόκλιση.
fill Διατηρεί τη μεσαία περιοχή της εικόνας του περιγράμματος.

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

Προεπιλεγμένη τιμή: 100%
Προκληρίσιμη ιδιότητα: no
Έκδοση: CSS3
Γλώσσα γραφής JavaScript: object.style.borderImageSlice="50% 50%"

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

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

Chrome IE / Edge Firefox Safari Opera
15.0 11.0 15.0 6.0 15.0

βλέπετε border-image ιδιότητες。