CSS shape-outside ιδιότητα

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

shape-outside Η ιδιότητα επιτρέπει τη ρύθμιση μορφής περιβάλλοντος για το περιεχόμενο γραμμής. Στα προεπιλεγμένα, το περιεχόμενο γραμμής περιβάλλεται από το εξωτερικό περιθώριο του στοιχείου, ενώ με shape-outsideκαι μπορείτε να προσαρμόσετε αυτόν τον τρόπο περιβάλλοντος.

shape-outside Η ιδιότητα ορίζει την περιοχή κύλισης του στοιχείου κύλισης. Η περιοχή κύλισης ορίζει τη μορφή που περιβάλλει το στοιχείο κύλισης γραμμής.

Παράδειγμα

Για να περιβάλλει η γραμμή το εσωτερικό περιεχόμενο με κύκλο:

img {
  float: αριστερά;
  clip-path: κυκλός(40%);
  shape-outside: κυκλός(45%);
}

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

Γλώσσα CSS

shape-outside: none|margin-box|border-box|padding-box|content-box|basic-shape|url(εικόνα)|initial|κληρονομικότητα;

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

Τιμή Περιγραφή
μηδέν Προεπιλεγμένη τιμή. Η περιοχή κύλισης δεν επηρεάζεται. Το περιεχόμενο γραμμής περιβάλλεται από το εξωτερικό περιθωρίο του στοιχείου.
margin-box Ορίζει τη μορφή που περιβάλλεται από τα περιεχόμενα του εξωτερικού περιθωρίου.
border-box Ορίζει τη μορφή που περιβάλλεται από τα περιεχόμενα του περιθωρίου.
padding-box Ορίζει τη μορφή που περιβάλλεται από τα περιεχόμενα του εσωτερικού περιθωρίου.
content-box

Ορίζει τη μορφή που περιβάλλεται από τα περιεχόμενα της γωνίας.

Η ακτίνα κάθε γωνίας αυτού του κουτιού είναι 0 ή το μεγαλύτερο από border-radius - border-width - padding.
basic-shape Η περιοχή κύλισης βασίζεται στη μορφή του κλειστού κύκλου, κύκλου, οvals ή πολυγώνου από τις συναρτήσεις inset(), circle(), ellipse() ή polygon().
url(εικόνα) Η περιοχή κύλισης βασίζεται στο αλφα- κανάλι της καθορισμένης εικόνας, ορίζεται από shape-image-threshold.
initial Ρύθμιση αυτής της ιδιότητας στην προεπιλεγμένη της τιμή. Δείτε initial.
κληρονομικότητα Απόκτηση αυτής της ιδιότητας από τον γονικό στοιχείο του. Δείτε κληρονομικότητα.

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

Προεπιλεγμένη τιμή: μηδέν
Κληρονομικότητα: Όχι
Προπαραγωγή Αニμασιών: ναι για basic-shape. Διαβάστε για animatable
Έκδοση: Μονάδα Σχεδίων CSS Level 1
Γλώσσα γραφικής προγραμματιστικής: object.style.shapeOutside="κυκλός(50%)"

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

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

Χρόμιο Ετζ Φάιρεξ Σάφάρι Οπερά
37 79 62 10.1 24