CSS Circle Generator — 50% Border Radius
Σχεδιάστε οπτικά την ακτίνα περιγράμματος CSS: τέσσερα ανεξάρτητα ρυθμιστικά γωνίας σε px ή τοις εκατό, μια συντόμευση σύνδεσης σε όλες τις γωνίες για στιγμιαίους κύκλους και χάπια, καθώς και μια λειτουργία οργανικής σταγόνας με τυχαία σχήματα.
Αποτέλεσμα
Αυτή η σελίδα ανοίγει τη γεννήτρια ακτίνας περιγράμματος με και τις τέσσερις γωνίες συνδεδεμένες και ορισμένες στο 50%, την τιμή που μετατρέπει ένα πλαίσιο σε κύκλο χρησιμοποιώντας τίποτα άλλο εκτός από το CSS. Ειλικρινά: σε ένα τετράγωνο κουτί αυτό κάνει έναν τέλειο κύκλο, αλλά σε ένα ορθογώνιο πλαίσιο το ίδιο 50% παράγει μια έλλειψη που μοιάζει με στάδιο, αφού κάθε γωνία ολοκληρώνει μόνο το δικό της τέταρτο.
Αυτή η διάκριση έχει σημασία επειδή η ακτίνα περιγράμματος 50% είναι ο πιο συνηθισμένος τρόπος δημιουργίας κυκλικών avatar, σημάτων εικονιδίων και κουκκίδων κατάστασης στο CSS — πολύ πιο απλό από το κόψιμο ενός κύκλου με μια μάσκα ή τη σχεδίαση ενός σε SVG και παραμένει ευκρινές σε οποιοδήποτε μέγεθος, καθώς είναι ένα σχετικό ποσοστό, όχι μια σταθερή ακτίνα pixel.
Αλλάξτε το κουτί σε ένα σταθερό τετράγωνο μέγεθος στο δικό σας CSS για να κλειδωθεί στον τέλειο κύκλο ή αφήστε το ορθογώνιο επίτηδες για ένα σχήμα σαν χάπι — είτε έτσι είτε αλλιώς, οι γωνίες παραμένουν συνδεδεμένες εδώ, ώστε ένα μόνο ρυθμιστικό να διατηρεί και τα τέσσερα σε συγχρονισμό ενώ αντιγράφετε το CSS που προκύπτει.