Κύρια σημεία
- 01Τρεις λειτουργίες — ομοιόμορφη, ανά γωνία και ελλειπτική — καλύπτουν όλα τα στοιχεία από απλά στρογγυλεμένα κουμπιά έως οργανικά blob σχήματα.
- 02Υποστηρίζει px, %, και rem μονάδες, καθεμία με διαφορετική συμπεριφορά κλιμάκωσης.
- 03Η ελλειπτική λειτουργία εκθέτει οριζόντιες και κάθετες ακτίνες ανά γωνία για τη πλήρη σύνταξη CSS border-radius.
- 04Η live preview χρησιμοποιεί την πραγματική ιδιότητα CSS, έτσι αυτό που βλέπετε είναι ακριβώς αυτό που θα κάνει render το πρόγραμμα περιήγησής σας.
Από απλές στρογγυλεμένες γωνίες σε οργανικά blob σχήματα
Μια τιμή border-radius τεσσάρων γωνιών είναι αρκετά εύκολο να πληκτρολογηθεί από μνήμης — border-radius: 8px. Αλλά μόλις χρειάζεστε διαφορετικές ακτίνες ανά γωνία, ή θέλετε τη σύνταξη CSS ελλειπτικού για οργανικά σχήματα, το shorthand γίνεται κρυπτικό γρήγορα. Η πλήρης μορφή είναι top-left-x top-right-x bottom-right-x bottom-left-x / top-left-y top-right-y bottom-right-y bottom-left-y — οcho τιμές σε συγκεκριμένη σειρά.
Ο generator border-radius του Handytool σας επιτρέπει να σύρετε δρομείς για κάθε γωνία σε κάθε λειτουργία και να δείτε το σχήμα να ενημερώνεται live. Εναλλάσσεστε μεταξύ px, %, και rem χωρίς να υπολογίζετε ξανά, και αντιγράψτε την σωστή shorthand ή long-form CSS δήλωση όταν τελειώσετε.
Πώς να σχεδιάσετε ένα Border Radius
- 01
Επιλέξτε μια λειτουργία
Η ομοιόμορφη λειτουργία εφαρμόζει μια ακτίνα σε όλες τις τέσσερις γωνίες. Η λειτουργία ανά γωνία ελέγχει κάθε γωνία ανεξάρτητα. Η ελλειπτική λειτουργία προσθέτει ξεχωριστή οριζόντια και κάθετη ακτίνα ανά γωνία.
- 02
Επιλέξτε μια μονάδα
Επιλέξτε px για απόλυτα μεγέθη, % για τιμές που κλιμακώνονται με τις διαστάσεις του στοιχείου, ή rem για μεγέθη που συνδέονται με το μέγεθος γραμματοσειράς root.
- 03
Σύρετε τους δρομείς
Προσαρμόστε τις τιμές ακτίνας και παρακολουθήστε το στοιχείο προεπισκόπησης να ενημερώνεται live. Για τη λειτουργία ανά γωνία, σύρετε τον δρομέα κάθε γωνίας ανεξάρτητα.
- 04
Προεπισκοπή του σχήματος
Το πλαίσιο προεπισκόπησης εφαρμόζει την πραγματική ιδιότητα CSS border-radius, έτσι το σχήμα που βλέπετε είναι το σχήμα που θα κάνει render το πρόγραμμα περιήγησής σας.
- 05
Αντιγράψτε το CSS
Κάντε κλικ Αντιγραφή για να πάρετε τη δήλωση border-radius και επικολλήστε την στο φύλλο στυλ σας.
Κοινά σχήματα και πότε να χρησιμοποιήσετε κάθε λειτουργία
- 01Κουμπί χάπι: ομοιόμορφη % λειτουργία, ρύθμιση σε 50% — πάντα ένα πλήρες χάπι ανεξάρτητα από το πλάτος κουμπιού
- 02Κάρτα με λεπτή στρογγυλοποίηση: ομοιόμορφη px λειτουργία, 8–16px — το πιο κοινό σχέδιο UI
- 03Ασύμμετρη ετικέτα ή ετικέτα: ανά γωνία λειτουργία, κοφτερή στη μια πλευρά, στρογγυλεμένη στην άλλη
- 04Avatar κύκλος: ομοιόμορφη % λειτουργία, 50% — κλιμακώνεται με το κοντέινερ εικόνας
- 05Οργανικό blob σχήμα: ελλειπτική λειτουργία με διαφορετικές τιμές X/Y ανά γωνία
Άμεση προεπισκόπηση, τίποτα δεν φορτώνεται
Ο generator border-radius είναι εντελώς client-side. Οι δρομείς, οι αλλαγές λειτουργίας και οι αλλαγές μονάδας ενημερώνουν τη προεπισκόπηση αμέσως χωρίς κανένα server roundtrip. Δεν υπάρχει λογαριασμός και κανένα όριο ρυθμού.
Το εργαλείο λειτουργεί σε όλα τα σύγχρονα προγράμματα περιήγησης. Η ιδιότητα border-radius — συμπεριλαμβανομένης της ελλειπτικής σύνταξης X/Y — υποστηρίζεται σε κάθε evergreen έκδοση του Safari, Firefox, Edge και Chrome, έτσι το output είναι ασφαλές να χρησιμοποιηθεί χωρίς vendor prefixes ή fallbacks.
Συνήθεις ερωτήσεις Border-Radius Generator
Ποια είναι η διαφορά μεταξύ px και % για border-radius;
Οι pixel ακτίνες είναι απόλυτες — 16px είναι πάντα 16px. Οι ακτίνες ποσοστού είναι σχετικές με τις διαστάσεις του στοιχείου, έτσι το 50% δημιουργεί έναν τέλειο κύκλο σε ένα τετράγωνο κουτί και μια έλλειψη σε ένα ορθογώνιο.
Πότε πρέπει να χρησιμοποιώ την ελλειπτική λειτουργία;
Χρησιμοποιήστε την ελλειπτική λειτουργία όταν θέλετε μια γωνία που φουσκώνει περισσότερο σε έναν άξονα — για ένα οριζόντιο χάπι, ένα σχήμα φύλλου ή ένα οργανικό blob. Το CSS εκφράζει αυτό ως X-radii / Y-radii στο border-radius shorthand.
Γιατί η ακτίνα ποσοστού μου φαίνεται λάθος σε ένα μη τετράγωνο κουτί;
Οι οριζόντιες ακτίνες ποσοστού είναι σχετικές με το πλάτος του στοιχείου· οι κάθετες ακτίνες με το ύψος του. Σε ένα πλατύ, κοντό στοιχείο οι γωνίες τεντώνονται σε ελλείψεις αντί για κυκλικά τόξα.
Λειτουργεί το output σε κάθε πρόγραμμα περιήγησης;
Ναι — το border-radius συμπεριλαμβανομένης της ελλειπτικής σύνταξης υποστηρίζεται σε κάθε σύγχρονο πρόγραμμα περιήγησης: όλες οι evergreen εκδόσεις του Safari, Firefox, Edge και Chrome. Δεν χρειάζονται vendor prefixes.
Πώς δημιουργώ έναν τέλειο κύκλο με border-radius;
Ρυθμίστε όλες τις γωνίες σε 50% σε λειτουργία ποσοστού σε ένα τετράγωνο στοιχείο. Το στοιχείο χρειάζεται επίσης ίσο πλάτος και ύψος — χρησιμοποιήστε aspect-ratio: 1 / 1 αν το μέγεθος είναι δυναμικό.