Γεννήτρια Border Radius

Πώς να χρησιμοποιήσετε τη γεννήτρια border radius

1. Σύρετε τις κουκκίδες στις άκρες της προεπισκόπησης. Κάθε έγχρωμη κουκκίδα ορίζει την οριζόντια ακτίνα μιας γωνίας· με επιλεγμένο το Ελλειπτικές γωνίες (8 τιμές), οι λευκές κουκκίδες ορίζουν τις κάθετες ακτίνες.
2. Εναλλακτικά, πληκτρολογήστε ακριβείς τιμές στις Γωνίες: Πάνω αριστερά, Πάνω δεξιά, Κάτω δεξιά και Κάτω αριστερά, καθεμία με πεδίο Οριζόντια και πεδίο Κάθετα.
3. Επιλέξτε τη Μονάδα: % (ποσοστό του πλαισίου) ή px (εικονοστοιχεία). Όταν αλλάζετε μονάδα, οι τρέχουσες τιμές μετατρέπονται και το σχήμα μένει ίδιο.
4. Ορίστε το Πλάτος πλαισίου (px) και το Ύψος πλαισίου (px) ώστε να ταιριάζουν με το στοιχείο σας και χρησιμοποιήστε το Όλες οι γωνίες για να στρογγυλέψετε όλες τις γωνίες μαζί.
5. Δοκιμάστε τις Προεπιλογές (Στρογγυλεμένο, Κάψουλα, Κύκλος, Φύλλο, Σταγόνα, Αυγό, Εισιτήριο και τρία blob) ή πατήστε Τυχαίο blob για ένα οργανικό σχήμα.
6. Επιλέξτε Αναλυτικές ιδιότητες αν προτιμάτε τις τέσσερις δηλώσεις border-*-radius και αντιγράψτε τον Κώδικας CSS με το κουμπί Αντιγραφή.

Πληκτρολόγιο: επιλέξτε μια κουκκίδα και πατήστε τα βελάκια για να αλλάξετε την ακτίνα της κατά ένα βήμα (κατά 10 με Shift).

Η σύνταξη του border-radius

Το border-radius δέχεται από μία έως τέσσερις τιμές, με σειρά πάνω αριστερά, πάνω δεξιά, κάτω δεξιά, κάτω αριστερά. Όπως και στα περιθώρια (margin), οι τιμές που λείπουν αντιγράφονται από την απέναντι γωνία: το border-radius: 10px 20px στρογγυλεύει την πάνω αριστερά και την κάτω δεξιά γωνία κατά 10px και τις άλλες δύο κατά 20px. Το εργαλείο γράφει πάντα τη συντομότερη ισοδύναμη μορφή.

Στην πραγματικότητα κάθε γωνία είναι το ένα τέταρτο μιας έλλειψης με δύο ακτίνες. Μια κάθετος (/) χωρίζει τις οριζόντιες ακτίνες από τις κάθετες, οπότε προκύπτουν έως οκτώ τιμές:

border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;

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

Εικονοστοιχεία ή ποσοστά;

• Τα px δίνουν την ίδια καμπύλη όποιο μέγεθος κι αν έχει το στοιχείο. Είναι η σωστή επιλογή για κουμπιά, κάρτες και πεδία εισαγωγής: border-radius: 8px.
• Το % είναι σχετικό με το στοιχείο: οι οριζόντιες ακτίνες με το πλάτος του και οι κάθετες με το ύψος του. Το 50% μετατρέπει ένα τετράγωνο σε κύκλο και ένα ορθογώνιο σε έλλειψη. Τα ποσοστά είναι αυτά που κάνουν τα σχήματα blob να κλιμακώνονται μαζί με το στοιχείο.

Για ένα κουμπί σε σχήμα κάψουλας, χρησιμοποιήστε ακτίνα σε εικονοστοιχεία τουλάχιστον ίση με το μισό του ύψους. Η προεπιλογή Κάψουλα κάνει ακριβώς αυτό για το μέγεθος πλαισίου που έχετε ορίσει· λειτουργεί όμως και μια πολύ μεγάλη τιμή όπως το 999px.

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

Σχήματα blob

Οι προεπιλογές blob και το Τυχαίο blob χρησιμοποιούν οκτώ ποσοστά, όπου οι δύο κουκκίδες κάθε πλευράς αθροίζουν στο 100%. Έτσι οι καμπύλες συναντιούνται ακριβώς και το σχήμα μοιάζει με λείο βότσαλο. Αν ορίσετε ένα CSS transition στο border-radius ανάμεσα σε δύο blob, παίρνετε εφέ «μεταμόρφωσης».