Γεννήτρια Border Radius CSS
Οπτική γεννήτρια border-radius CSS. Προσαρμόστε κάθε γωνία ανεξάρτητα με ζωντανή προεπισκόπηση και αντιγράψτε τον κώδικα CSS άμεσα.
Τι είναι το CSS border-radius;
Το CSS border-radius είναι μια ιδιότητα που στρογγυλεύει τις γωνίες του εξωτερικού περιγράμματος ενός στοιχείου. Μπορείτε να ορίσετε κάθε γωνία ανεξάρτητα με μία έως τέσσερις τιμές.
Πώς φτιάχνω τέλειο κύκλο με border-radius;
Ορίστε border-radius σε 50% σε τετράγωνο στοιχείο (ίσο πλάτος και ύψος). Για έλλειψη, χρησιμοποιήστε border-radius: 50% σε ορθογώνιο στοιχείο.
Ποιες μονάδες μπορώ να χρησιμοποιήσω για border-radius;
Το border-radius δέχεται px, %, em, rem, vw, vh και άλλες μονάδες μήκους CSS. Τα ποσοστά είναι σχετικά με τις διαστάσεις του στοιχείου.
Ποια είναι η σύντομη σύνταξη για border-radius;
Η σύντμηση ακολουθεί το μοτίβο: πάνω-αριστερά πάνω-δεξιά κάτω-δεξιά κάτω-αριστερά. Μία τιμή εφαρμόζεται σε όλες τις γωνίες. Δύο τιμές ορίζουν πάνω-αριστερά/κάτω-δεξιά και πάνω-δεξιά/κάτω-αριστερά.
Μπορώ να δημιουργήσω ελλειπτικές γωνίες;
Ναι, χρησιμοποιώντας τη σύνταξη με κάθετο (/) μπορείτε να ορίσετε ξεχωριστές οριζόντιες και κάθετες ακτίνες. Παράδειγμα: border-radius: 50% / 100px.
Το border-radius λειτουργεί σε όλα τα στοιχεία;
Το border-radius λειτουργεί στα περισσότερα στοιχεία HTML, συμπεριλαμβανομένων div, button, img και input. Χωρίς overflow: hidden μπορεί να μην κόβει το περιεχόμενο υπερχείλισης.
Μπορώ να δημιουργήσω σύνθετα σχήματα με border-radius;
Ναι, συνδυάζοντας διαφορετικές τιμές ακτίνας για κάθε γωνία, μπορείτε να δημιουργήσετε κάψουλες, ωοειδή, φύλλα και προσαρμοσμένα οργανικά σχήματα.
Το border-radius υποστηρίζεται σε όλα τα προγράμματα περιήγησης;
Ναι, το border-radius υποστηρίζεται σε όλα τα σύγχρονα προγράμματα περιήγησης, συμπεριλαμβανομένων Chrome, Firefox, Safari, Edge και προγραμμάτων περιήγησης για κινητά.
Πώς φτιάχνω κουμπί σε σχήμα κάψουλας;
Ορίστε border-radius σε τιμή ίση ή μεγαλύτερη από το μισό του ύψους του στοιχείου. Για κουμπί 40px ύψος, χρησιμοποιήστε border-radius: 20px ή μεγαλύτερο.
Το border-radius επηρεάζει τις εικόνες φόντου;
Ναι, το border-radius κόβει το φόντο, την εικόνα φόντου και το περίγραμμα του στοιχείου. Το φόντο ακολουθεί αυτόματα τις στρογγυλεμένες γωνίες.
Μπορώ να ανιματώ το border-radius;
Ναι, το border-radius ανιμάρεται με μεταβάσεις και κινούμενα σχέδια CSS. Μπορείτε να μεταβαίνετε ομαλά μεταξύ διαφορετικών τιμών ακτίνας.
Μπορώ να χρησιμοποιήσω border-radius με μετασχηματισμούς CSS;
Ναι, το border-radius λειτουργεί καλά με μετασχηματισμούς CSS όπως rotate, scale και translate.
Πώς δημιουργώ κύκλο με περίγραμμα;
Εφαρμόστε border-radius: 50% σε τετράγωνο στοιχείο με ίσο πλάτος και ύψος, και μετά προσθέστε ιδιότητα border.
Ποια είναι η διαφορά μεταξύ μεμονωμένων ιδιοτήτων γωνιών και σύντμησης;
Οι μεμονωμένες ιδιότητες όπως border-top-left-radius σας δίνουν ακριβή έλεγχο κάθε γωνίας. Η σύντμηση σας επιτρέπει να ορίσετε πολλαπλές γωνίες σε μία δήλωση.
Πώς να χρησιμοποιήσετε το Γεννήτρια Border Radius CSS
Σχεδιάστε στρογγυλεμένες γωνίες οπτικά με αυτή τη γεννήτρια CSS border-radius. Όλα εκτελούνται τοπικά στον browser σας και δεν ανεβαίνει κανένα δεδομένο.
- Επιλέξτε px, %, em ή rem από το μενού Unit.
- Σύρετε τους δείκτες Top Left, Top Right, Bottom Right και Bottom Left για να στρογγυλέψετε κάθε γωνία ξεχωριστά.
- Ενεργοποιήστε το Link all corners για να εφαρμόσετε μία τιμή και στις τέσσερις γωνίες.
- Αντιγράψτε το CSS που δημιουργήθηκε από την προεπισκόπηση και επικολλήστε το στο stylesheet σας.
50% και στις τέσσερις γωνίες δίνει τέλειο κύκλο ή κάψουλα· με em ή rem η ακτίνα κλιμακώνεται με την τυπογραφία σας.
Σχετικά εργαλεία
- Γεννήτρια CSS Box Shadow Δωρεάν διαδικτυακή γεννήτρια CSS box-shadow. Δημιουργήστε οπτικά όμορφες σκιές με ρυθμιζόμενη μετατόπιση, θόλωση, εξάπλωση, χρώμα και inset. Ζωντανή προεπισκόπηση και άμεση αντιγραφή κώδικα.
- Γεννήτρια CSS Gradient Δημιουργήστε εντυπωσιακά CSS gradient οπτικά. Δημιουργήστε γραμμικά, ακτινικά και κωνικά gradient με πολλαπλές στάσεις χρώματος, γωνίες και θέσεις. Αντιγράψτε κώδικα CSS έτοιμο για παραγωγή αμέσως.
- Γεννήτρια CSS Grid Δωρεάν οπτική γεννήτρια CSS Grid με ζωντανή προεπισκόπηση. Σχεδιάστε responsive διατάξεις πλέγματος διαδραστικά και εξάγετε έτοιμο CSS κώδικα αμέσως.
- Γεννήτρια CSS Flexbox Οπτική γεννήτρια CSS Flexbox με ζωντανή προεπισκόπηση. Προσαρμόστε τις ιδιότητες flex και λάβετε έτοιμο κώδικα CSS.
- Γεννήτρια Border Radius Δωρεάν δημιουργική γεννήτρια border-radius online. Σύρετε 8 λαβές ή επιλέξτε ένα έτοιμο blob για να δημιουργήσετε οργανικά σχήματα CSS και να αντιγράψετε τον κώδικα άμεσα.
- Μετατροπέας Χρωμάτων Δωρεάν διαδικτυακός μετατροπέας χρωμάτων. Άμεση μετατροπή μορφών HEX, RGB, HSL, HSV με οπτικό επιλογέα. 100% ιδιωτικό, εκτελείται στο πρόγραμμα περιήγησής σας.
- Γεννήτρια CSS Easing Δωρεάν online γεννήτρια CSS easing. Σύρετε τα σημεία ελέγχου του cubic-bezier σε μια διαδραστική καμπύλη, επιλέξτε από 18 προεπιλογές, δείτε μπάλα σε βρόχο animation και αντιγράψτε τη συνάρτηση χρονισμού άμεσα.
- Γεννήτρια Text Shadow CSS Δωρεάν online γεννήτρια text-shadow CSS. Στοίβαξε πολλές στρώσεις σκιάς με μετατόπιση, θόλωση, χρώμα και αδιαφάνεια, δοκίμασε προεπιλογές Neon, 3D, Retro και αντίγραψε το CSS άμεσα.