Η shape-outsideιδιότητα ελέγχει τον τρόπο με τον οποίο το περιεχόμενο θα τυλίγεται γύρω από το πλαίσιο οριοθέτησης ενός κινητού στοιχείου. Συνήθως αυτό συμβαίνει έτσι ώστε το κείμενο να μπορεί να επανατοποθετηθεί πάνω σε σχήμα όπως κύκλο, έλλειψη ή πολύγωνο:
.element ( float: left; shape-outside: circle(50%); width: 200px; height: 200px; )
Είναι σημαντικό να σημειωθεί ότι αυτή η ιδιότητα θα λειτουργεί μόνο σε αιωρούμενα στοιχεία, παρόλο που αυτό ενδέχεται να αλλάξει στο μέλλον. Η shape-outsideιδιότητα μπορεί επίσης να χειριστεί με μεταβάσεις ή κινούμενα σχέδια.
Αξίες
circle(): για την κατασκευή κυκλικών σχημάτων.ellipse(): για την κατασκευή ελλειπτικών σχημάτων.inset(): για την κατασκευή ορθογώνιων σχημάτων.polygon(): για τη δημιουργία οποιουδήποτε σχήματος με 3 ή περισσότερες κορυφές.url(): προσδιορίζει ποια εικόνα πρέπει να χρησιμοποιηθεί για να τυλίξει το κείμενο.initial: η περιοχή πλωτήρα δεν επηρεάζεται.inherit: κληρονομεί τηνshape-outsideτιμή από τον γονέα.
Οι ακόλουθες τιμές προσδιορίζουν ποια αναφορά του μοντέλου κουτιού πρέπει να χρησιμοποιηθεί για την τοποθέτηση του σχήματος εντός:
margin-boxpadding-boxborder-box
Αυτές οι τιμές θα πρέπει να προσαρτηθεί στο τέλος, για παράδειγμα: shape-outside: circle(50% at 0 0) padding-box. Από προεπιλογή, η margin-boxαναφορά θα χρησιμοποιηθεί.
έλλειψη()
.element ( shape-outside: ellipse(150px 300px at 50% 50%); )Η ellipse()συνάρτηση απαιτεί τις τιμές ακτίνων για τον άξονα x, y της έλλειψης ακολουθούμενες από τις συντεταγμένες για να τοποθετήσετε το κέντρο του σχήματος μέσα στο πλαίσιο οριοθέτησής του. Για παράδειγμα, το παραπάνω παράδειγμα θα τοποθετήσει το κέντρο της έλλειψης στο κατακόρυφο και οριζόντιο κέντρο του .elementdiv:
Παρόλο που η παραπάνω επίδειξη μπορεί να υποδηλώνει ότι αλλάζουμε το σχήμα του divίδιου, αν προσθέσουμε περιγράμματα και μια εικόνα φόντου θα διαπιστώσουμε ότι το πλαίσιο οριοθέτησης είναι στην πραγματικότητα παραλληλόγραμμο:
Ίσως είναι καλύτερο να το σκεφτείτε με αυτόν τον τρόπο: με την shape-outsideιδιότητα αλλάζουμε τη σχέση άλλων στοιχείων γύρω από ένα στοιχείο, όχι τη γεωμετρία του ίδιου του στοιχείου. Για να το διορθώσουμε αυτό θα πρέπει να χρησιμοποιήσουμε shape-outsideπαράλληλα με την clip-path()ιδιότητα, όπως σε αυτό το παράδειγμα:
κύκλος()
.element ( shape-outside: circle(50%); )Αυτή η συνάρτηση δημιουργεί έναν κύκλο και στο παραπάνω παράδειγμα κώδικα θα δημιουργήσει έναν κύκλο με ακτίνα που είναι το μισό ύψος και πλάτος .element. Η circle()συνάρτηση μπορεί επίσης να χρησιμοποιήσει την ίδια σύνταξη για την τοποθέτηση του σχήματος μέσα.
url ()
.element ( shape-outside: url('circle.png.webp'); )Σε αυτήν την περίπτωση, έχουμε δύο αιωρούμενες εικόνες, μία και στις δύο πλευρές ενός μπλοκ κειμένου. Δεδομένου ότι και οι δύο εικόνες έχουν ορίσει την shape-outsideιδιότητα, τότε το κείμενο από κάτω θα αποφύγει αυτά τα δύο επιπλέοντα.
Είναι επίσης δυνατό να ορίσετε την shape-image-thresholdιδιότητα που θα ενημερώνει το πρόγραμμα περιήγησης ποια pixel, ανάλογα με τη διαφάνεια τους, θα πρέπει να δημιουργήσουν το σχήμα. Για παράδειγμα:
.element ( shape-outside: url('image.png.webp'); shape-image-threshold: 0.5; )Σε αυτό το παράδειγμα, τα μόνα pixel που θα δημιουργήσουν το σχήμα πρέπει να έχουν 50% διαφάνεια και άνω. Οι τιμές από 0.0(διαφανές) έως 1.0(αδιαφανές) είναι έγκυρες.
πολύγωνο()
.element ( shape-outside: polygon(0 0, 0 200px, 300px 600px); )Αυτή η συνάρτηση δημιουργεί οποιοδήποτε σχήμα έχει τρεις ή περισσότερες κορυφές, για παράδειγμα:
Είναι σημαντικό να σημειωθεί ότι εάν αυτή η ιδιότητα πρόκειται να είναι κινούμενη, απαιτεί τον ίδιο αριθμό κορυφών όταν δηλώνετε την κινούμενη κατάσταση:
.element ( shape-outside: polygon(0 0, 100% 0, 100% 100%, 0 100%); transition: shape-outside 1s; ) .element:hover ( shape-outside: polygon(0 0, 100% 50%, 100% 50%, 0 100%); )ένθεση()
.element ( shape-outside: inset(100px 100px 100px 100px 10px); /* shape-outside: inset(top right bottom left border-radius); */ )inset()είναι μια συνάρτηση για την κατασκευή ορθογώνιων σχημάτων, παίρνει πέντε παραμέτρους αλλά η πέμπτη, border-radiusείναι προαιρετική. Τα άλλα ορίσματα είναι αντισταθμίσεις προς τα μέσα από την άκρη του .element:
Πάνω έχουμε ένα στοιχείο πλάτους 200px έως 200px και αντισταθμίζουμε το σχήμα σε 50px σε κάθε κατεύθυνση εκτός από την αριστερή πλευρά. Με αυτόν τον τρόπο το κείμενο θα τυλίξει πάνω από το σχήμα, παρόλο που το div εκτείνεται στην κορυφή.
Υποστήριξη προγράμματος περιήγησης
Αυτά τα δεδομένα υποστήριξης του προγράμματος περιήγησης προέρχονται από την Caniuse, η οποία έχει περισσότερες λεπτομέρειες. Ένας αριθμός υποδεικνύει ότι το πρόγραμμα περιήγησης υποστηρίζει τη λειτουργία σε αυτήν την έκδοση και νεότερη.
Επιφάνεια εργασίας
| Χρώμιο | Firefox | ΙΕ | Ακρη | Σαφάρι |
|---|---|---|---|---|
| 37 | 62 | Οχι | 79 | 7.1 * |
Κινητό / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 8 * |