Σύνορα - CSS-Κόλπα

Η border-boundaryιδιότητα στο CSS θέτει περιορισμούς στα όρια ενός στοιχείου που επηρεάζει τον τρόπο συμπεριφοράς των συνόρων του στοιχείου. Ορίζεται στην προδιαγραφή CSS Round Display Level 1, η οποία βρίσκεται σε κατάσταση προσχεδίου εργασίας. Αυτό σημαίνει ότι τα πράγματα μπορούν να αλλάξουν από τώρα έως την επίσημη σύσταση υποψηφίου.

.element ( border-boundary: display; /* sets the boundary to the screen display */ )

Το γεγονός ότι αυτή η ιδιότητα ζει στην προδιαγραφή CSS Round Display σας λέει ήδη τι είναι καλό: δημιουργία κυκλικών διεπαφών. Ακόμα πιο συγκεκριμένα, border-boundaryεμπίπτει στην ενότητα «Σχεδίαση περιθωρίων γύρω από το περίγραμμα οθόνης», η οποία αποτελεί μια ακόμη ένδειξη για το τι κάνει καλά: επιτρέποντας στα όρια ενός στοιχείου να σέβονται το στρογγυλό όριο των κυκλικών διεπαφών

Φανταστείτε, αν θέλετε, ένα έξυπνο ρολόι με στρογγυλή οθόνη. Ας υποθέσουμε ότι η οθόνη είναι 150 τετραγωνικά. Και σε αυτό είναι ένα πορτοκαλί κουτί που έχει τις ίδιες διαστάσεις.

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

Χμμ, όχι τόσο υπέροχο. Και πάλι, οι άκρες του κουτιού ξεχειλίζουν από τη στρογγυλή οθόνη, έτσι το περίγραμμα μας περικοπεί στη διαδικασία.

Εκεί border-boundaryταιριάζει στην εικόνα. Η προσθήκη του στο κουτί με τιμή displayεπιτρέπει στο περίγραμμα του κουτιού να ακολουθεί το στρογγυλό σχήμα της οθόνης. Δεδομένου ότι η υποστήριξη του προγράμματος περιήγησης της ιδιοκτησίας είναι ακριβώς zilch αυτή τη στιγμή, επιτρέψτε μου να προσφέρω μια εικονική οπτική για το επιδιωκόμενο αποτέλεσμα.

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

Μπορείτε να φανταστείτε πόσο χρήσιμο είναι αυτό όταν πρόκειται για το σχεδιασμό ρολογιών με διασυνδέσεις. Η Ομάδα Εργασίας CSS έχει καταρτίσει μια λίστα πιθανών περιπτώσεων χρήσης όπου border-boundaryθα μπορούσαν πραγματικά να είναι χρήσιμες.

Σύνταξη

border-boundary: none | parent | display;

Αρχική τιμή: none
Ισχύει για: όλα τα στοιχεία
Κληρονομικό: ναι
Ποσοστά: n / a
Υπολογισμένη τιμή: όπως καθορίζεται
Τύπος κινούμενης εικόνας: διακριτός

Αξίες

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