Γεννήτρια CSS Border Radius
Σχεδιάστε οπτικά το CSS border-radius με ζωντανή προεπισκόπηση και αντιγράψτε έτοιμο για παραγωγή κώδικα.
border-radius: —;
100% ιδιωτικό — όλα εκτελούνται στο πρόγραμμα περιήγησής σας. Τίποτα δεν μεταφορτώνεται.
Σχετικά με το Γεννήτρια CSS Border Radius
Ο CSS Border Radius Generator δημιουργεί τα πάντα, από απαλά στρογγυλεμένες κάρτες έως οργανικά σχήματα blob. Σύρετε τις λαβές γωνιών απευθείας στην προεπισκόπηση, ή ορίστε κάθε γωνία αριθμητικά — συμπεριλαμβανομένης της πλήρους σύνταξης οκτώ τιμών, όπου κάθε γωνία έχει ξεχωριστές οριζόντιες και κάθετες ακτίνες. Αυτός ο δεύτερος άξονας είναι που ξεκλειδώνει αυγά, φύλλα, δάκρυα και blobs.
Ένας διακόπτης σύνδεσης γωνιών κρατά και τις τέσσερις γωνίες συγχρονισμένες για κλασική ομοιόμορφη στρογγυλοποίηση, ενώ η αποσύνδεσή τους ελευθερώνει κάθε γωνία για ασύμμετρα σχήματα. Δώδεκα προκαθορισμένα πρότυπα — rounded, pill, circle, squircle, δύο blobs, leaf, egg, arch, teardrop, petal και wave — δείχνουν τι μπορεί να κάνει η ιδιότητα, και ένα κουμπί τυχαιοποίησης δημιουργεί ατελείωτα νέα οργανικά σχήματα.
Μπορείτε να αλλάξετε τη μονάδα, να επαναχρωματίσετε το στοιχείο και τον καμβά ώστε να ταιριάζουν με το σχέδιό σας, και να αντιγράψετε είτε την απλή τιμή border-radius είτε έναν πλήρη κανόνα CSS. Το εργαλείο είναι 100% client-side — τίποτα δεν μεταφορτώνεται.
Πώς να χρησιμοποιήσετε το Γεννήτρια CSS Border Radius
- Σύρετε τις λαβές γωνιών στην προεπισκόπηση, ή απενεργοποιήστε το “Σύνδεση όλων των γωνιών” για να επεξεργαστείτε κάθε γωνία ξεχωριστά.
- Ορίστε την οριζόντια και κάθετη ακτίνα ανά γωνία για οργανικά σχήματα τύπου blob.
- Επιλέξτε τη μονάδα σας και προσαρμόστε τα χρώματα στοιχείου και φόντου για προεπισκόπηση στο πλαίσιο του σχεδιασμού σας.
- Δοκιμάστε τα προκαθορισμένα πρότυπα — pill, squircle, blob, leaf, teardrop και άλλα — ή πατήστε τυχαιοποίηση.
- Αντιγράψτε την τιμή border-radius ή το πλήρες CSS.