מהו מחולל רדיוס הגבול CSS?
מחולל רדיוס הגבול CSS הוא עורך חזותי עבור המאפיין רדיוס גבול CSS.אתה גורר מחוון עבור כל פינה, צופה בסיבוב רכיב תצוגה מקדימה בזמן אמת, ומעתיק את ה-CSS המדויק שהוא מייצר - ללא ניחוש ערכי פיקסלים וטעינה מחדש של הדף.
המאפיין Border-Radius נראה פשוט אבל יש לו קיצור קומפקטי שמוציא אנשים למעלה: ערך אחד מעגל את כל ארבע הפינות, שני ערכים מגדירים את שני האלכסונים, וארבעה ערכים פועלים עם כיוון השעון משמאל למעלה. כלי זה מאפשר לך להגדיר כל פינה באופן עצמאי ולאחר מכן מוציא את הקיצור המקביל הקצר ביותר באופן אוטומטי, כך שה-CSS שלך יישאר נקי.
הכל פועל בדפדפן שלך. התחל מהגדרה מראש כמו כרטיס, גלולה, עיגול או כתם, כוונן כל פינה, החלף את היחידה בין פיקסלים ואחוזים והעתק את ההצהרה. אין חשבון, אין העלאות, והוא ממשיך לעבוד במצב לא מקוון לאחר טעינת הדף.
אחוזים ופיקסלים מתנהגים אחרת בכל דבר שאינו מרובע, וההבדל מפתיע אנשים רדיוס פיקסל הוא אותה עקומה בכל פינה, בעוד שאחוז נמדד מול כל ציר בנפרד, כך ש-50 אחוז בקופסה רחבה נותן אליפסה ולא עיגול, כלומר התכונה שהופכת מלבן לגלולה או לצורת עדשה המפרט גם מגן עליך מפני גיאומטריה בלתי אפשרית: כאשר הרדיוסים לאורך קצה אחד מסתכמים ליותר מאורך הקצה הזה, הדפדפן משנה כל רדיוס באלמנט כלפי מטה באופן פרופורציונלי במקום לחפוף אותם, כך שערך גדול מפסיק לצמוח בשקט. הפלט משתמש בקיצור התקף הקצר ביותר, וזו הסיבה שארבע פינות שוות קורסות למספר בודד.
כמחולל CSS ברדיוס גבול, החלק השימושי הוא שהוא עושה את החשבון הקצר עבורך. Set Top Left and Bottom Right to 24 and Top Right and Bottom Left to 8, in px, והפלט קורא border-radius: 24px 8px; כי הזוגות האלכסוניים תואמים. Drop Bottom Right to 0 והוא הופך לשלושת הערכים 24px 8px 0px, מכיוון ש-Top Right ו-Bottom Left עדיין תואמים. אתה יכול לבדוק כל תוצאה מול התצוגה המקדימה לפני ההעתקה, וזה מה שמיועד מחולל רדיוס גבול CSS.
כיצד להשתמש במחולל רדיוס הגבול CSS?
בחר הגדרה מראש או התחל מחדש
בחר הגדרה מראש כגון מעוגל, גלולה, עיגול או כתם לנקודת התחלה מיידית, או התחל מהפינות המעוגלות המוגדרות כברירת מחדל.
התאם כל פינה
גרור את המחוונים השמאלי העליון, הימני העליון, הימני התחתון והשמאלי למטה כדי לעגל כל פינה באופן עצמאי, או הגדר את כולם לאותו ערך עבור רדיוס אחיד.
בחר יחידה
עבור בין px, %, em ו-rem. אחוזים יוצרים פינות אליפטיות ביחס לגודל האלמנט - הגדר 50% בכל הפינות כדי ליצור עיגול או אליפסה מושלמים.
העתק את ה-CSS
העתק את הצהרת רדיוס הגבול שנוצר, כבר מכווץ לקיצור התקף הקצר ביותר, והדבק אותו בגיליון הסגנונות שלך.
תכונות מפתח
שליטה לפינה
מחוונים עצמאיים לכל ארבע הפינות מאפשרים לך לבנות צורות אסימטריות כמו עלים, לשונית ורדיוסי בועות דיבור, לא רק עיגול אחיד
הפלט התקף הקצר ביותר
הכלי ממוטט את ארבע הפינות שלך לקצר הקצר ביותר ברדיוס הגבול המקביל ביותר, תוך שמירה על ה-CSS שלך נקי וקריא
מספר יחידות
עבור בין px, %, em ו-rem - אחוזים מייצרים פינות אליפטיות ביחס לגודל הקופסה, וכך נוצרים עיגולים וכתמים
תצוגה מקדימה חיה
רכיב תצוגה מקדימה מתעדכן באופן מיידי תוך כדי גרירה, כך שתוכל לראות בדיוק איך הפינות מסתובבות לפני שאתה מעתיק משהו
Frequently Asked Questions
Related Tools
CSS Box Shadow Generator
Design layered CSS box-shadows with a live preview and sliders for offset, blur, spread, color, opacity, and inset - then copy production-ready CSS.
CSS Clamp Generator
Generate fluid, responsive CSS clamp() values that scale between viewports
Flexbox Generator
Build CSS flexbox layouts visually. Adjust justify-content, align-items, direction, wrap and gap with a live preview, then copy the generated CSS - all in your browser.
CSS Neumorphism Generator
Create soft-UI (neumorphic) elements with a live preview and controls for distance, blur, intensity, radius, surface color, and flat/concave/convex/pressed shapes - then copy the CSS.
Comments
0 comments
No comments yet. Be the first to share your thoughts!