Πώς να χρησιμοποιήσετε την ιδιότητα CSS3 Border Radius

Με το CSS3, μπορείτε να δώσετε οποιοδήποτε στοιχείο "στρογγυλεμένες γωνίες" χρησιμοποιώντας την border-radiusιδιότητα. Η τιμή μπορεί να είναι σε οποιαδήποτε έγκυρη μονάδα μήκους CSS.

 .rounded-corners { border-radius: 20px; } .circle { border-radius: 50%; }
παραδείγματα

Σημείωση: Τοborder-radiusακίνητο είναι στην πραγματικότητα ένα ακίνητο στενογραφία για ταborder-top-left-radius,border-top-right-radius,border-bottom-right-radiusκαιborder-bottom-left-radiusιδιότητες.

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

.new-shape { border-radius: 20px 50px 5px 0; /* top left, top right, bottom right, bottom left */ }

Εάν παρέχονται μόνο δύο τιμές, η πρώτη τιμή ισχύει για την επάνω αριστερή και την κάτω δεξιά γωνία και τη δεύτερη τιμή για την επάνω δεξιά και κάτω αριστερή γωνία.

.leaf-shape { border-radius: 0 50%; }

Εάν έχουν οριστεί τρεις τιμές, η πρώτη ισχύει και πάλι στην ακτίνα πάνω-αριστερά, η δεύτερη τιμή δείχνει επάνω-δεξιά και κάτω-αριστερά, αφήνοντας την τρίτη τιμή να υποδεικνύει την κάτω-δεξιά γωνία.

.odd-shape { border-radius: 0 20px 50%; }
παραδείγματα

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

.elliptical-1 { border-radius: 50px/10px; /* horizontal radius / vertical radius */ } .elliptical-2 { border-radius: 10px/50px; }
παραδείγματα

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

.elliptical-3 { border-radius: 50px 20px 50px 20px/20px 50px 20px 50px; /* horizontal top-left, horizontal top-right, horizontal bottom-right, horizontal bottom-left / vertical top-left, vertical top-right, vertical bottom-right, vertical bottom-left */ }

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

.elliptical-4 { border-top-left-radius: 50px 20px; /* horizontal radius, vertical radius */ border-top-right-radius: 20px 50px; border-bottom-right-radius: 50px 20px; border-bottom-left-radius: 20px 50px; }
παραδείγματα

Περισσότερες πληροφορίες για την ιδιότητα ακτίνας περιγράμματος CSS:

  • Μάθετε να χρησιμοποιείτε την ιδιότητα ακτίνας περιγράμματος CSS δημιουργώντας μια αριθμομηχανή