Γεννήτρια Border Radius
Δωρεάν δημιουργική γεννήτρια border-radius online. Σύρετε 8 λαβές ή επιλέξτε ένα έτοιμο blob για να δημιουργήσετε οργανικά σχήματα CSS και να αντιγράψετε τον κώδικα άμεσα.
Τι σημαίνει η σύνταξη border-radius με 8 τιμές;
Στη σύνταξη border-radius: h1 h2 h3 h4 / v1 v2 v3 v4, οι τιμές πριν από την κάθετο είναι οι οριζόντιες ακτίνες (πάνω αριστερά, πάνω δεξιά, κάτω δεξιά, κάτω αριστερά) και οι τιμές μετά είναι οι κατακόρυφες ακτίνες. Διαφορετικές τιμές σε κάθε διεύθυνση δημιουργούν τα οργανικά σχήματα blob.
Πώς χρησιμοποιώ το CSS που παράγεται;
Αντιγράψτε τη γραμμή border-radius και επικολλήστε την σε οποιονδήποτε κανόνα CSS του στοιχείου που θέλετε να πλάσετε, π.χ. .card { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }. Λειτουργεί σε καθαρό CSS, Sass, arbitrary values του Tailwind και inline στυλ.
Πού χρησιμοποιούνται τα σχήματα blob;
Τα σχήματα blob είναι δημοφιλή σε hero εικονογραφήσεις, avatar, φωτογραφίες προφίλ, κάρτες χαρακτηριστικών, κουμπιά και διακοσμητικά φόντα στο σύγχρονο σχεδιασμό ιστοσελίδων και εφαρμογών.
Λειτουργούν οι στρογγυλεμένες γωνίες σε όλα τα προγράμματα περιήγησης;
Ναι. Το border-radius υποστηρίζεται από όλα τα σύγχρονα προγράμματα περιήγησης, μεταξύ των οποίων Chrome, Firefox, Safari, Edge και προγράμματα για κινητά, χωρίς προθέματα κατασκευαστών.
Μπορώ να κάνω animation στο σχήμα blob;
Ναι. Το border-radius είναι κινούμενη ιδιότητα, οπότε ένα CSS transition επιτρέπει ομαλή μετάλλαξη μεταξύ σχημάτων, π.χ. .blob { transition: border-radius .8s ease; }.
Ποια είναι η διαφορά ανάμεσα σε σύνταξη 4 και 8 τιμών;
Η μορφή με 4 τιμές δίνει σε κάθε γωνία την ίδια οριζόντια και κατακόρυφη ακτίνα, κάτι αρκετό για κάψουλες και κύκλους. Η μορφή με 8 τιμές χωρίζει τις οριζόντιες και κατακόρυφες ακτίνες, επιτρέποντας ασύμμετρα, οργανικά σχήματα.
Πώς φτιάχνω ένα τέλειο κύκλο;
Ορίστε και τις οκτώ τιμές στο 50% σε ένα τετράγωνο στοιχείο, ή απλώς χρησιμοποιήστε border-radius: 50%. Μπορείτε επίσης να ξεκινήσετε από έτοιμο σχήμα κοντά στον κύκλο και να το προσαρμόσετε.
Στέλνονται τα δεδομένα μου κάπου;
Όχι. Η γεννήτρια λειτουργεί εξ ολοκλήρου στο πρόγραμμα περιήγησής σας με καθαρό CSS και JavaScript. Τίποτα από όσα σύρετε, πληκτρολογείτε ή αντιγράφετε δεν αποστέλλεται σε διακομιστή.
Μπορώ να το χρησιμοποιήσω σε μη τετράγωνα στοιχεία;
Ναι, αλλά οι ποσοστιαίες ακτίνες σχετίζονται με τις διαστάσεις του στοιχείου, οπότε ένα ορθογώνιο θα αποκτήσει ελλειπτικές γωνίες και θα φαίνεται διαφορετικό από την τετράγωνη προεπισκόπηση. Χρησιμοποιήστε τις τιμές ως σημείο εκκίνησης και προσαρμόστε τες.
Πώς να χρησιμοποιήσετε το Γεννήτρια Border Radius
Το border-radius με οκτώ τιμές παράγει οργανικά σχήματα blob με ελλειπτικές γωνίες που κανένα συνηθισμένο στρογγυλεμένο ορθογώνιο δεν φτάνει. Πλάθετε το σχήμα με τις λαβές και αντιγράφετε το έτοιμο CSS — όλα αποδίδονται ζωντανά στον browser σας.
- Σύρετε οποιαδήποτε από τις οκτώ λαβές στις ακμές του σχήματος — αυτές στην πάνω και κάτω ακμή ρυθμίζουν τις οριζόντιες ακτίνες, οι πλευρικές τις κατακόρυφες.
- Κάντε κλικ σε ένα από τα έξι τετράγωνα προεπιλεγμένων σχημάτων για να ξεκινήσετε από ένα σχεδιασμένο blob και μετά τελειοποιήστε τις τιμές στα πεδία Οριζόντιες ακτίνες και Κατακόρυφες ακτίνες (μία ανά γωνία, 0–100%).
- Πατήστε Τυχαίο για να δημιουργήσετε με ένα κλικ ένα νέο οργανικό σχήμα, ή Επαναφορά για επιστροφή στο προεπιλεγμένο σχήμα και χρώματα.
- Επιλέξτε Χρώμα σχήματος και Φόντο για να δείτε το blob στην παλέτα-στόχο σας — και τα δύο ενημερώνονται αμέσως.
- Πατήστε Αντιγραφή CSS για να πάρετε τη ζωντανή δήλωση border-radius που εμφανίζεται στην κάτω γραμμή και να την επικολλήσετε σε οποιοδήποτε στοιχείο.
Εφαρμόστε τον κώδικα σε τετράγωνο στοιχείο με overflow: hidden για το κλασικό blob ύφος· τα ποσοστά κρατούν την καμπύλη ρευστή σε κάθε μέγεθος, και η κάθετος στην σύνταξη διαχωρίζει τις οριζόντιες από τις κατακόρυφες ακτίνες.
Σχετικά εργαλεία
- Γεννήτρια Border Radius CSS Οπτική γεννήτρια border-radius CSS. Προσαρμόστε κάθε γωνία ανεξάρτητα με ζωντανή προεπισκόπηση και αντιγράψτε τον κώδικα CSS άμεσα.
- Γεννήτρια CSS Gradient Δημιουργήστε εντυπωσιακά CSS gradient οπτικά. Δημιουργήστε γραμμικά, ακτινικά και κωνικά gradient με πολλαπλές στάσεις χρώματος, γωνίες και θέσεις. Αντιγράψτε κώδικα CSS έτοιμο για παραγωγή αμέσως.
- Γεννήτρια CSS Box Shadow Δωρεάν διαδικτυακή γεννήτρια CSS box-shadow. Δημιουργήστε οπτικά όμορφες σκιές με ρυθμιζόμενη μετατόπιση, θόλωση, εξάπλωση, χρώμα και inset. Ζωντανή προεπισκόπηση και άμεση αντιγραφή κώδικα.
- Γεννήτρια παλέτας χρωμάτων Δημιουργήστε όμορφες, αρμονικές παλέτες χρωμάτων άμεσα με τη δωρεάν online γεννήτριά μας. Υποστηρίζει μονοχρωματικές, ανάλογες, συμπληρωματικές, τριαδικές, split-συμπληρωματικές και τετραδικές λειτουργίες. Ρυθμίστε χρώματα με sliders HSL, κλειδώστε αγαπημένα και εξάγετε ως CSS, Tailwind, JSON ή SVG. 100% βασισμένο σε πρόγραμμα περιήγησης, τα δεδομένα σας δεν φεύγουν ποτέ από τη συσκευή σας.
- Μετατροπέας Χρωμάτων Δωρεάν διαδικτυακός μετατροπέας χρωμάτων. Άμεση μετατροπή μορφών 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 άμεσα.
- Γεννήτρια CSS Clip Path Δωρεάν online γεννήτρια CSS clip-path. Σχεδιάστε σχήματα polygon, circle, ellipse και inset με σύροντας σημεία, ζωντανή προεπισκόπηση και αντιγραφή κώδικα CSS με ένα κλικ.