Ακτίνα περιγράμματος - CSS-Κόλπα

Μπορείτε να δώσετε οποιοδήποτε στοιχείο "στρογγυλεμένες γωνίες" εφαρμόζοντας ένα border-radiusCSS. Θα παρατηρήσετε μόνο εάν υπάρχει αλλαγή χρώματος. Για παράδειγμα, εάν το στοιχείο έχει χρώμα φόντου ή περίγραμμα που είναι διαφορετικό από το στοιχείο που έχει τελειώσει. Απλά παραδείγματα:

#example-one ( border-radius: 10px; background: #BADA55; ) #example-two ( border-radius: 10px; border: 3px solid #BADA55; )

Στην πραγματικότητα δεν είναι πλέον απαραίτητο, αλλά για την απόλυτη δυνατή υποστήριξη του προγράμματος περιήγησης, θα μπορούσατε να προθέσετε με -webkit-και -moz-:

.round ( /* Safari 3-4, iOS 1-3.2, Android 1.6- */ -webkit-border-radius: 12px; /* Firefox 1-3.6 */ -moz-border-radius: 12px; /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */ border-radius: 12px; )

Παρατηρήστε τη σειρά αυτών των ιδιοτήτων: τα προθέματα προμηθευτή παρατίθενται πρώτα και η μη προκαθορισμένη έκδοση "προδιαγραφή" αναφέρεται τελευταία. Αυτός είναι ο σωστός τρόπος για να το κάνετε. Η ακτίνα των συνόρων είναι ένα ιδιαίτερα καλό παράδειγμα για το γιατί το κάνουμε με αυτόν τον τρόπο. Σε μια ελαφρώς πιο περίπλοκη έκδοση της χρήσης border-radius(όπου περνάτε δύο τιμές αντί για μία), το παλαιότερο -webkit-πρόθεμα προμηθευτή θα έκανε κάτι εντελώς διαφορετικό από την έκδοση "spec". Επομένως, αν αντιγράψουμε / επικολλήσουμε τυφλά τις ίδιες τιμές και στις τρεις ιδιότητες, θα μπορούσαμε να δούμε διαφορετικά αποτελέσματα μεταξύ προγράμματος περιήγησης. Μάθετε περισσότερα για αυτό το σενάριο. Για την πιο μακροπρόθεσμη συνέπεια, είναι καλύτερο να αναφέρετε την τελευταία έκδοση της έκδοσης "spec".

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

Εάν το στοιχείο έχει φόντο εικόνας, θα περικοπεί στη στρογγυλεμένη γωνία φυσικά:

#example-three ( border-radius: 20px; background: url(bglines.png.webp); /* will get clipped */ )

Μερικές φορές μπορείτε να δείτε μια background-color«διαρροή» έξω από ένα περίγραμμα όταν border-radiusυπάρχει. (βλέπω). Για να το αποφύγετε αυτό, χρησιμοποιείτε φόντο κλιπ:

.round ( border-radius: 10px; /* Prevent background color leak outs */ -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; )

Με μία μόνο τιμή, border-radiusθα ισχύει το ίδιο και στις τέσσερις γωνίες ενός στοιχείου. Αλλά αυτό δεν πρέπει να ισχύει. Μπορείτε να προσδιορίσετε κάθε γωνία ξεχωριστά αν θέλετε:

.round ( border-radius: 5px 10px 15px 20px; /* top left, top right, bottom right, bottom left */ )

Μπορείτε επίσης να καθορίσετε δύο ή τρεις τιμές. Το MDN το εξηγεί καλά:

Εάν έχει οριστεί μία τιμή, αυτή η ακτίνα ισχύει και για τις 4 γωνίες .
Εάν έχουν οριστεί δύο τιμές, η πρώτη ισχύει top-leftκαι bottom-rightγωνία, η δεύτερη ισχύει top-rightκαι bottom-leftγωνία.
Τέσσερις τιμές ισχύουν για το top-left, top-right, bottom-right, bottom-leftγωνία με αυτή τη σειρά.
Τρεις τιμές: Η δεύτερη τιμή ισχύει top-rightκαι επίσης bottom-left.

#example-four ( border-radius: 5px 20px 5px; background: #BADA55; )

Μπορείτε επίσης να καθορίσετε τις ακτίνες στις οποίες η γωνία στρογγυλοποιείται. Με άλλα λόγια, η στρογγυλοποίηση δεν πρέπει να είναι απόλυτα κυκλική, μπορεί να είναι ελλειπτική. Αυτό γίνεται χρησιμοποιώντας μια κάθετο ("/") μεταξύ δύο τιμών.

#example-five ( border-radius: 10px/30px; /* horizontal radius / vertical radius */ ) #example-six ( border-radius: 30px/10px; /* horizontal radius / vertical radius */ )

Σημείωση: Ο Firefox υποστηρίζει μόνο ελλειπτικά περιγράμματα σε προγράμματα περιήγησης Web+ Kit 3,5+ και παλαιότερα (π.χ. Safari 4) αντιμετωπίζει εσφαλμένα το "40px 10px" ως το ίδιο με το "40px / 10px".

Μπορείτε να καθορίσετε την τιμή border-radiusσε ποσοστά. Αυτό είναι ιδιαίτερα χρήσιμο όταν θέλετε να δημιουργήσετε ένα σχήμα κύκλου ή άλλης, αλλά μπορεί να χρησιμοποιηθεί όποτε θέλετε η ακτίνα του περιγράμματος να συσχετίζεται άμεσα με το πλάτος των στοιχείων.

#example-seven, #example-eight ( border-radius: 50%; ) #example-eight ( width: 200px; )

Σημείωση: Στο Safari οι ποσοστιαίες τιμές για ακτίνα περιγράμματος υποστηρίζονται μόνο στο 5.1+. Στο Opera, υποστηρίζεται μόνο σε 11,5+.

Εδώ είναι κάθε μεμονωμένη ιδιότητα, με προθέματα προμηθευτή:

.round ( -webkit-border-top-left-radius: 1px; -webkit-border-top-right-radius: 2px; -webkit-border-bottom-right-radius: 3px; -webkit-border-bottom-left-radius: 4px; -moz-border-radius-topleft: 1px; -moz-border-radius-topright: 2px; -moz-border-radius-bottomright: 3px; -moz-border-radius-bottomleft: 4px; border-top-left-radius: 1px; border-top-right-radius: 2px; border-bottom-right-radius: 3px; border-bottom-left-radius: 4px; )

Σημείωση: Κάθε μία από αυτές τις τιμές μπορεί επίσης να έχει μια τιμή χωρισμένη στο διάστημα, όπως "5px 10px", η οποία συμπεριφέρεται σαν μια τιμή διαχωρισμένη με κάθετο σε στενή (οριζόντια ακτίνα (διάστημα) κάθετη ακτίνα).

Πόροι

Γρήγορο εργαλείο για τη δημιουργία κώδικα ακτίνας περιγράμματος
Έγγραφα Mozilla
Αναζητώντας την τέλεια ακτίνα
Πρέπει να προθέσουμε ακτίνα περιγράμματος πια;

Εδώ είναι ένα μικρό πράγμα που μπορείτε να παίξετε με τις διαφορετικές ιδιότητες και τιμές:

Δείτε το Pen All the border-radius του Chris Coyier (@chriscoyier) στο CodePen.

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

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