מחולל פינות מעוגלות וצורות
התאם את הרדיוסים האופקיים והאנכיים של ארבע הפינות ב-px או % והצג תצוגה מקדימה של הצורה. העתק או שמור את ה-CSS של border-radius שנוצר. רוחב, גובה וצבע של התצוגה המקדימה אינם כלולים ב-CSS.
מה אפשר לעשות
התאמת העיגול מתוך הגדרה מוכנית
בחרו מתוך 8 הגדרות מוכנות, כולל פינות מעוגלות, כפוס ועלה, והתאימו את הרדיוסים. בחירת הגדרה מוכנית מחליפה את הרדיוסים ואת היחידה.
מתן עיגול שונה לכל אחד מארבעת הפינות
כבו את הגדרת הרדיוס הזהה כדי להזין את הרדיוסים האופקי והאנכי עבור הפינות השמאלית-עליונה, ימנית-עליונה, ימנית-תחתונה ושמאלית-תחתונה בנפרד.
בדיקה וקבלת ה-CSS
צרו CSS לאחר בדיקת הצורה. החליפו בין כתיב מקוצר להצהרות פינה נפרדות, ואז העתיקו או שמרו כקובץ CSS.
איך להשתמש
בחירת הגדרה מוכנית ויחידה
הזינו רדיוסים ישירות, או בחרו הגדרה מוכנית כדי להתחיל בהתאמה. שינוי היחידה אינו ממיר את המספרים.
השוואת העיגול והצורה
הזינו ערך אחד כדי להשתמש באותו רדיוס. כדי לשנות אותו לפי פינה, בטלו את האפשרות והתאימו את הערכים האופקי והאנכי.
בדיקת המידה לפי הצורך
בהגדרות התצוגה המקדימה אפשר לשנות את הרוחב, הגובה וצבע התצוגה המקדימה. אלה אינם כלולים ב-CSS הפלט.
יצירת CSS, ואז העתקה או שמירה
לחצו על «יצירת CSS» ובחרו את הפורמט שתרצו. אם שיניתם את הרדיוסים, היחידה או המידה, צרו אותו מחדש.
שימושי כאשר
עיצוב פינות כרטיסים וכפתורים
כשאתם רוצים ליצור CSS לרכיבי עמוד על ידי עיגול ארבעת הפינות באופן שווה או עיגול הפינות העליונות בלבד.
יצירת רקע מעוגל א-סימטרי
כשאתם רוצים להשתנות בעיגול האופקי והאנכי לפי פינה כדי ליצור קווי מתאר שנראים כעלים או כצורות אורגניות.
כיצד רדיוסים, יחידות ומידת תצוגה קשורים זה לזה
אופקי ואנכי הם שני כיוונים של אותה פינה
הרדיוס האופקי שולט בעיגול האופקי, והרדיוס האנכי שולט בעיגול האנכי. פינה אינה מעוגלת אם אחד הערכים הוא 0. ציינו את ארבע הפינות בכיוון השעון מהפינה השמאלית-עליונה.
% משתמש ברוחב ובגובה כייחוסים נפרדים
ערכי אחוז אופקיים יחסיים לרוחב הרכיב, וערכי אחוז אנכיים לגובהו. גם עם אותם מספרים, ריבוע ומלבן גבוה או רחב נראים שונים. px מציין אורך ישירות.
רדיוסים גדולים מדי מתכווצים באותו יחס
אם סכום הרדיוסים הסמוכים עולה על אורך הצד, כל 8 רדיוסי התצוגה מקטינים במקדם משותף. ערכי הקלט וה-CSS שנוצר אינם משתנים. בפרטים שאחרי היצירה אפשר לבדוק את הרדיוסים שבשימוש בתצוגה המקדימה.
הטווח של קווי מתאר שפינות מעוגלות יכולים להביע
border-radius הופך את הפינות לעקומות אליפטיות. הוא אינו יכול ליצור גומות או מצולעים שרירותיים. הגדרת ה-squircle מקורבת את הצורה בפינות אליפטיות; היא אינה משחזרת את העקומה המתמטית בדיוק.
שאלות נפוצות
אפשר להגדיר עיגול שונה לכל פינה?
כן. בטלו את הסימון «שימוש באותו רדיוס לכל הפינות» כדי להזין את רדיוס האופקי והאנכי של כל פינה בנפרד. סימון חוזר מגדיר את כל הרדיוסים לפי רדיוס האופקי של הפינה השמאלית-עליונה.
האם המספרים מומרים כשאני מחליף יחידות?
לא. המספרים נשמרים ורק היחידה משתנה. אם ערך גדול מ-100 נותר לאחר העברה מ-px ל-%, הזינו אותו מחדש בטווח 0–100.
האם המידה והצבע שבתצוגה המקדימה כלולים ב-CSS?
לא. הפלט מכיל רק הצהרות border-radius. הגדירו את הרוחב, הגובה וצבע הרקע בעמוד או ברכיב שבו אתם משתמשים.
מדוע לצורה המוצגת יש פינות מעוגלות קטנות יותר מהרדיוסים שהזנתי?
הדפדפן מקטין את הרדיוסים המוצגים באותו יחס כדי למנוע חפיפה בין עקומות הפינות. אפשר לבדוק את מקדם ההקטנה ואת ערכי ה-px של כל פינה תחת «רדיוסים שבשימוש לתצוגה».
קלט ותוצאות
- רדיוסים
- ציינו את כל 8 הערכים באותה יחידה: 0–100% או 0–9999px. מתקבלים גם ערכים עשוריים.
- תצוגה מקדימה
- רוחב וגובה של התצוגה המקדימה הם מספרים שלמים בטווח 1–400px. רוחב שאינו נכנס ניתן לגלול אופקית בתוך השדה.
- פלט
- כתיב מקוצר של border-radius או הצהרות לכל אחד מארבעת הפינות. העתיקו או שמרו border-radius.css.
- לא כלול
- רוחב, גובה, צבע רקע, וייצוא לתמונה או ל-SVG.