border-radius הוא אחד המאפיינים הראשונים של CSS שרוב האנשים לומדים ואחד האחרונים שהם מבינים לגמרי עיגול כל ארבע הפינות של כרטיס ב-12 פיקסלים הוא קל ואז כפתור צריך להיות גלולה בכל רוחב, אווטאר צריך להיות עיגול, בועת צ'אט צריכה פינה אחת חדה, ופתאום סדר הקיצור, ההבדל בין 50% ו 999px, ורדיוס ש-" מפסיק לגדול" הכל משנה.
מדריך זה מסביר כיצד המאפיין פועל מהמפרט ומעלה: מה המשמעות של כל ספירת ערכים, כיצד אחוזים שונים מפיקסלים, כיצד דפדפנים משנים רדיוסים גדולים מדי, כיצד לבנות צורות נפוצות, ומדוע פינות מעוגלות לפעמים לא מופיעות הדוגמאות נבדקות מול ה מחולל רדיוס גבול CSS, המציג תצוגה מקדימה של כל פינה בשידור חי ומוציא את הקיצור התקף הקצר ביותר. זה אחד מה כלי CSS על Toolz.
TL;DR:
border-radiusסיבובים אלמנט's פינות ערך אחד מגדיר את כל ארבע הפינות, שני ערכים מגדירים את הזוגות העליון-שמאלי/תחתון-ימין ואת העליון-ימין/תחתון-שמאל, שלושה ערכים מוגדרים למעלה-שמאל, ואז למעלה-ימין ולמטה-שמאל ביחד, ואז למטה-ימין, וארבעה ערכים פועלים בכיוון השעון מלמעלה-שמאל רדיוסי פיקסל הם עקומות קבועות; אחוזים נמדדים מול רוחב וגובה בנפרד, אז50%עושה עיגול רק על ריבוע כאשר רדיוסים לאורך צד מסתכמים ליותר מהצד, הדפדפן מקנה קנה מידה של כל רדיוס כלפי מטה באופן פרופורציונלי. ה מחולל רדיוס גבול מטפל בקיצור בשבילך, צד הלקוח, חינם, ללא הרשמה.
מה עושה תכונת רדיוס הגבול CSS?
ה border-radius תכונה מקיפה את הפינות החיצוניות של אלמנט's תיבת גבול. כל פינה הופכת לרבע אליפסה עם רדיוס אופקי ורדיוס אנכי. כאשר שני הרדיוסים שווים, הפינה היא רבע עיגול.
הוא מוגדר ב-W3C CSS רקעים ומודול גבולות רמה 3, ונתמך ללא קידומת בכל דפדפן מרכזי במשך יותר מעשור, כך שאין צורך בקידומות של ספקים.
העיגול משפיע יותר מקו הגבול. האלמנט's הרקע נחתך לצורה המעוגלת, box-shadow עוקב אחר העקומה, ובדפדפנים מודרניים כך גם outline. התוכן בתוך האלמנט אינו נחתך אלא אם כן תוסיף overflow: hidden, וזו הסיבה הנפוצה ביותר שנראה שפינות מעוגלות נכשלות.
איך עובד קיצור הגבול-רדיוס?
border-radius הוא קיצור של ארבעה נכסים ארוכי יד: border-top-left-radius, border-top-right-radius, border-bottom-right-radius ו border-bottom-left-radius. מספר הערכים שאתה נותן מחליט לאילו פינות חל כל ערך.
| ערכים | דוגמה | שמאל למעלה | למעלה מימין | למטה מימין | למטה-שמאל |
|---|---|---|---|---|---|
| 1 | border-radius: 16px; |
16 פיקסלים | 16 פיקסלים | 16 פיקסלים | 16 פיקסלים |
| 2 | border-radius: 24px 8px; |
24 פיקסלים | 8 פיקסלים | 24 פיקסלים | 8 פיקסלים |
| 3 | border-radius: 24px 8px 0px; |
24 פיקסלים | 8 פיקסלים | 0 פיקסלים | 8 פיקסלים |
| 4 | border-radius: 20px 10px 5px 0px; |
20 פיקסלים | 10 פיקסלים | 5 פיקסלים | 0 פיקסלים |
התבנית היא אותו סדר בכיוון השעון המשמש את margin ו padding, החל מהפינה השמאלית העליונה במקום מהצד העליון ערכים חסרים ממולאים מהשותף האלכסוני שלהם: עם שני ערכים, עותקים מימין למטה למעלה-שמאל ותחתון-שמאל עותקים למעלה-ימין עם שלושה, עותקים משמאל למטה למעלה-ימין.
המחולל הופך את התהליך הזה אתה מגדיר כל פינה עם המחוון שלה, והיא כותבת הכי פחות ערכים שמייצרים את אותה צורה:
- כל ארבע הפינות שוות נותנות ערך אחד.
- שמאל למעלה שווה למטה-ימין, וימין למעלה שווה למטה-שמאל, נותן שני ערכים.
- למעלה מימין שווה לשמאל למטה (אבל האלכסון השני שונה) נותן שלושה ערכים.
- כל דבר אחר נותן ארבעה.
תוצאה אחת מפתיעה אנשים. סובב רק את הפינה השמאלית העליונה ב-20 פיקסלים והפלט הוא border-radius: 20px 0px 0px;, לא ארבעת הערך 20px 0px 0px 0px. שניהם נכונים; צורת שלושת הערכים קצרה יותר מכיוון שהימין העליון והשמאל התחתון שניהם אפס. כל ערך שומר על היחידה שלו, כך שפינת אפס מדפיסה כ 0px.
מה ההבדל בין Px ל-% עבור רדיוס גבול?
רדיוס פיקסל הוא גודל מוחלט. רדיוס אחוז הוא ביחס לאלמנט' גודל s, והחלקים האופקיים והאנכיים נמדדים בנפרד: הרדיוס האופקי מול הרוחב, הרדיוס האנכי מול הגובה.
על ריבוע, אלה אותו מספר. על מלבן, הם לא, וזו הסיבה 50% הופך ריבוע למעגל אבל מלבן לאליפסה.
קח את תיבת התצוגה המקדימה של הגנרטור 's, שרוחבה 224px וגובהה 160px:
| ערך | רדיוס אופקי | רדיוס אנכי | צורה |
|---|---|---|---|
16px |
16 פיקסלים | 16 פיקסלים | מלבן מעוגל, פינות עגולות |
50% |
112 פיקסלים (50% מ-224) | 80 פיקסלים (50% מ-160) | אליפסה |
25% |
56 פיקסלים | 40 פיקסלים | מלבן מעוגל, פינות אליפטיות |
999px |
999 פיקסלים, בקנה מידה ל-80 פיקסלים | 999 פיקסלים, בקנה מידה ל-80 פיקסלים | גלולה עם קצוות עגולים |
שתי היחידות האחרות מתנהגות כמו פיקסלים ברגע שנפתרו. em הוא ביחס לאלמנט' גודל הגופן שלו ו rem לגודל גופן השורש, אז 1rem הוא 16px עם הגדרות ברירת מחדל של דפדפן. Using em או rem מאפשר לפינות להתאים לגודל טקסט, המתאים לכפתורים ותגים שגדלים עם התווית שלהם.
במחולל, המחוונים פועלים מ-0 עד 200 עבור px, 0 עד 50 עבור % ו-0 עד 10 עבור em ו-rem, בשלבים של מספר שלם. החלפת היחידה שומרת על המספרים ומחליפה את היחידה, כך ש-16 פיקסלים הופכים ל-16%, לא לערך מומר.
מדוע רדיוס-גבול גדול מפסיק להתעגל?
מכיוון שהמפרט אינו מאפשר לעקומות פינות לחפוף. כאשר הרדיוסים בצד אחד מסתכמים ליותר מהצד הזה ' אורך s, הדפדפן מכווץ כל רדיוס באלמנט באותו גורם עד שהם מתאימים.
ה כלל חפיפה בפינה עובד כך לכל אחת מארבע הצלעות, חלקו את הצלע' s אורך בסכום שני הרדיוסים שנוגעים בו קחו את הקטן מבין אותם יחסים, קראו לו f. אם f קטן מ-1, הכפילו כל רדיוס ב-f.
הנה החישוב עבור border-radius: 999px בתיבת התצוגה המקדימה 224 על 160:
top and bottom sides: 224 / (999 + 999) = 0.1121
left and right sides: 160 / (999 + 999) = 0.0801
f = min(0.1121, 0.0801) = 0.0801
every radius: 999 × 0.0801 ≈ 80px
כל פינה מסתיימת ברדיוס של 80 פיקסלים, בדיוק חצי מגובה 160 פיקסלים, כך שהקצוות הקצרים הופכים לחצי עיגולים מושלמים אותו דבר קורה ב-200 פיקסלים, החלק העליון של מחוון הפיקסלים: f הוא 160 / 400 = 0.4, ו-200 × 0.4 הוא שוב 80 פיקסלים מעבר לחצי הצד הקצר יותר, רדיוס פיקסלים מפסיק לשנות כל דבר.
שתי תוצאות מעשיות בהמשך כפתור גלולה יכול להשתמש בכל ערך פיקסל גדול מאוד, והוא נשאר גלולה בכל רוחב ומכיוון שקנה המידה הוא פרופורציונלי על פני כל ארבע הפינות, פינה אחת גדולה מדי גם מכווצת את האחרות הגדר למעלה-שמאל ל-999px והשאיר את השאר ב-20px, ופינות ה-20px מוקטנות איתו.
איך יוצרים צורות נפוצות עם גבול-רדיוס?
רוב הצורות המעוגלות בממשקים מגיעות מקומץ מתכונים למחולל יש הגדרות קבועות מראש לנפוצות.
| צורה | CSS | הערות |
|---|---|---|
| שארפ | border-radius: 0px; |
ברירת המחדל עבור רוב האלמנטים |
| עדין | border-radius: 6px; |
כניסות, כפתורים קטנים |
| כרטיס | border-radius: 12px; |
לוחות וכרטיסים |
| מעוגל | border-radius: 16px; |
הגנרטור's ערך התחלתי |
| גלולה | border-radius: 999px; |
עובד בכל רוחב באמצעות קנה מידה חפיפה |
| מעגל | border-radius: 50%; |
צריך רוחב וגובה שווים |
| עלה | border-radius: 0px 24px; |
שתי פינות מנוגדות מעוגלות |
| בלוב | border-radius: 60% 40%; |
צורה אורגנית מאחוזים לא שווים |
| בועת דיבור | border-radius: 16px 16px 16px 0px; |
פינה חדה אחת ליד הרמקול |
| טאב | border-radius: 8px 8px 0px 0px; |
עליון מעוגל, תחתון שטוח |
מעגל. סט 50% על אלמנט ברוחב וגובה שווים לאווטרים, הוסף aspect-ratio: 1 ו object-fit: cover על התמונה כך שתמונה לא מרובעת לא נמתחת לאליפסה.
גלולה. השתמש בערך פיקסל גדול במקום 50%. על כפתור רחב, 50% מייצר אליפסה עם קצוות מחודדים למראה, מכיוון שהרדיוס האופקי הוא חצי מהרוחב. 999px מקבל קנה מידה למחצית הגובה במקום, נותן קצוות עגולים.
בלוב. הקבוע מראש 60% 40% מגדיר את למעלה-שמאל ולמטה-ימין ל-60% ואת השניים האחרים ל-40% בתיבת התצוגה המקדימה, הרדיוסים האופקיים לאורך הקצה העליון הם 134.4px ו-89.6px, שמצטברים בדיוק ל-224px, כך שלא מתרחש קנה מידה ושתי העקומות נפגשות ללא קצה ישר שנותר ביניהן. הגדרות קבועות מראש יכולות לעבור את טווח המחוון: Blob משתמש ב-60%, Pill משתמש ב-999px, והפלט שומר על הערכים הללו עד שתזיז מחוון.
בועת דיבור וכרטיסייה. לאף אחת מהצורות אין זוג אלכסוני תואם, ולכן שתיהן זקוקות לכל ארבעת הערכים הגדר את הפינות בנפרד במחולל וזה מאשר שלא קיימת צורה קצרה יותר.
מהו תחביר האלכסון ברדיוס-גבול?
קו נטוי מפריד בין רדיוסים אופקיים לרדיוסים אנכיים, כך שכל פינה יכולה להיות אליפסה לא עגולה עם גדלים שתבחר ישירות.
/* horizontal radii / vertical radii */
.lens {
border-radius: 50% / 20%;
}
/* four horizontal, then four vertical */
.egg {
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
הערכים בכל צד של הלוכסן עוקבים אחר אותם כללים אחד עד ארבעה כמו הקיצור הרגיל. מחולל Toolz אינו כותב תחביר לוכסן: הוא קובע רדיוס אחד לכל פינה, המכסה עיגולים, כדורים, קלפים וכתמים. לצורות ביצים וצורות עדשות מותאמות אישית, התחל מהגנרטור's פלט והוסף את חלק הלוכסן ביד.
למה הפינות המעוגלות שלי לא מופיעות?
כאשר border-radius נראה שלא עושה כלום, הסיבה היא כמעט תמיד אחת מאלה.
| סימפטום | סיבה | לתקן |
|---|---|---|
| תמונה או ילד מבצבצים מהפינות | ילדים אינם נחתכים כברירת מחדל | הוסף overflow: hidden להורה המעוגל, או סביב הילד גם |
| אין שינוי גלוי כלל | לאלמנט אין רקע, גבול או צל | תן לו צבע רקע או גבול כך שהצורה תהיה גלויה |
| פינות שולחן נשארות מרובעות | border-collapse: collapse על השולחן |
להשתמש border-collapse: separate עם border-spacing: 0, או לעגל עטיפה |
| מעגל נראה כמו אליפסה | רוחב וגובה שונים | הגדר מידות שוות או aspect-ratio: 1 |
| לגלולה יש קצוות מחודדים | באמצעות 50% על אלמנט רחב |
השתמש בערך px גדול כמו 999px |
| הרדיוס מפסיק לעלות | קנה מידה חופף | צָפוּי; הרדיוס מוגבל למחצית הצד הקצר יותר |
| פינות אלמנט פנימי נראות עבות יותר | רדיוס פנימי שווה לרדיוס חיצוני בתוך ריפוד | הגדר את הרדיוס הפנימי לרדיוס החיצוני פחות הריפוד |
האחרון עדין קלף עם border-radius: 16px ו padding: 8px המכיל תמונה עם אותו רדיוס 16px נראה לא אחיד, כי העקומה הפנימית צריכה להיות הדוקה יותר הרדיוס הפנימי שעוקב אחרי העקומה החיצונית הוא 16 פחות 8, אז 8px.
כיצד משתלב גבול-רדיוס עם צללים ושיפועים?
פינות מעוגלות נשלחות לבד לעיתים רחוקות. לכרטיס יש בדרך כלל צל ולעיתים קרובות רקע שיפוע, ושניהם עוקבים אחר הצורה המעוגלת באופן אוטומטי.
box-shadow מתחקה אחר תיבת הגבול המעוגלת, כך שלצל רך מתחת לכרטיס 12 פיקסלים יש פינות מעוגלות של 12 פיקסלים ללא כל עבודה נוספת. ה מחולל צללים תיבת מציג תצוגה מקדימה של צללים על אלמנט מעוגל, וה מדריך צללים מסביר את ערכי ההיסט, הטשטוש והפיזור שמאחוריהם.
רקעים, כולל שיפועים, נחתכים גם לצורה המעוגלת. כדי לעצב את המילוי, השתמש ב מחולל שיפוע CSS; ה מדריך שיפוע CSS עובר דרך התחביר. אם גודל הפינה צריך להתאים עם נקודת התצוגה במקום להישאר קבוע, ה מחולל מהדק CSS בונה א clamp() ערך שאתה יכול להשתמש בו כרדיוס, למשל כרטיס שהוא 8px בטלפונים ו-20px במסכים רחבים.
שימוש בגנרטור, צעד אחר צעד
- בחר הגדרה מראש כגון כרטיס, גלולה, מעגל או Blob, או להתחיל מפינות ברירת המחדל 16px.
- התאם פינות. ברירת המחדל של החלפת הפינה היא Independent, כאשר כל מחוון מזיז רק את הפינה שלו. החלף אותו ל-Linked כדי להזיז את כל הארבעה יחד.
- בחר יחידה: px, %, em או rem.
- בדוק את התצוגה המקדימה. תיבת השיפוע מתעדכנת תוך כדי גרירה, כולל קנה מידה של חפיפה בערכים גדולים.
- העתק את ה-CSS. כפתור העתק CSS מעתיק את המלא
border-radius:הצהרה בצורתה הקצרה ביותר.
הכל פועל בצד הלקוח: התצוגה המקדימה והקוד נוצרים על ידי JavaScript בדפדפן שלך, שום דבר לא מועלה, והדף ממשיך לעבוד במצב לא מקוון לאחר הטעינה. כשאתה מוכן, פתח את מחולל הגבול-רדיוס, הגדר את הפינות שלך והדבק את ההצהרה ישירות בגיליון הסגנונות שלך.
