גבולות

הפודקאסט של CSS – 016: גבולות

במודול box model (מודל תיבות), השתמשנו באנלוגיית המסגרת כדי לתאר כל קטע במודל התיבה.

שלוש מסגרות של תמונות זו לצד זו. המסגרת האמצעית כוללת את הקטעים של דגם התיבה מעליה

תיבת הגבול היא המסגרת של התיבות שלכם, ומאפייני border מספקים מגוון עצום של אפשרויות ליצירת מסגרת כמעט בכל סגנון שאתם יכולים לחשוב עליו.

מאפייני גבול

מאפייני border הנפרדים מספקים דרך לסגנן חלקים שונים של גבול.

תמיכה בדפדפן

  • 1
  • 12
  • 1
  • 1

מקור

סגנון

כדי שיופיע גבול, צריך להגדיר את הערך border-style. אפשר לבחור מבין כמה אפשרויות:

כשמשתמשים בסגנונות ridge, inset, outset ו-groove, הדפדפן יכהה את צבע הגבול של הצבע השני שמוצג כדי לספק ניגודיות ועומק. ההתנהגות הזו עשויה להשתנות בין דפדפנים, במיוחד בצבעים כהים כמו black. ב-Chrome, סגנונות הגבולות האלה ייראו אחידים וב-Firefox, הם יורחבו ויסומנו בצבע שני כהה יותר.

התנהגות הדפדפן עשויה להשתנות גם עבור סגנונות גבולות אחרים, לכן חשוב לבדוק את האתר בדפדפנים שונים. דוגמה נפוצה להבדל הזה היא האופן שבו כל דפדפן מעבד את הסגנונות dotted ו-dashed.

הדגמת גבולות ב-Chrome, Firefox ו-Safari, הממחישה את ההבדלים הקלים באופן שבו תצוגת הגבולות
גבולות שמוצגים ב-Chrome, Firefox ו-Safari.

כדי להגדיר סגנון גבול בכל צד של התיבה, משתמשים באפשרויות border-top-style, border-right-style, border-left-style ו-border-bottom-style.

מקוצר

כמו ב-margin וב-padding, אפשר להשתמש במאפיין הקיצור של border כדי להגדיר את כל חלקי הגבול בהצהרה אחת.

.my-element {
    border: 1px solid red;
}

סדר הערכים במקשי הקיצור border הוא border-width, border-style ולאחר מכן border-color.

צבע

אפשר להגדיר צבעים בכל צידי התיבה או בכל צד באמצעות border-color. כברירת מחדל, נעשה שימוש בצבע הטקסט הנוכחי של התיבה: currentColor. כלומר, אם מצהירים רק על מאפייני גבול, כמו רוחב, הצבע יהיה הערך המחושב, אלא אם תגדירו אותו באופן מפורש.

.my-element {
    color: blue;
    border: solid; /* Will be a blue border */
}

.my-element {
    color: blue;
    border: solid yellow;
}

כדי להגדיר צבע גבול בכל צד של התיבה, משתמשים ב-border-top-color, ב-border-right-color, ב-border-left-color וב-border-bottom-color.

רוחב

רוחב הגבול הוא עובי הקו, והוא נקבע על ידי border-width. רוחב הגבול המוגדר כברירת מחדל הוא medium. עם זאת, המאפיין הזה לא יהיה גלוי, אלא אם תגדירו סגנון. אפשר להשתמש במידות רוחב עם שם אחרות כמו thin ו-thick.

המאפיינים של border-width מקבלים גם יחידת אורך כמו px, em, rem או %. כדי להגדיר רוחב גבול בכל צד של התיבה, משתמשים במאפיינים border-top-width, border-right-width, border-left-width ו-border-bottom-width.

תכונות לוגיות

במודול Logic Properties (מאפיינים לוגיים), גיליתם איך להתייחס לבלוקים של זרימה ולזרימה ישירה, במקום לפעולות מפורשות: למעלה, ימינה, למטה או משמאל.

יש לך את היכולת הזו גם עם גבולות:

.my-element {
    border: 2px dotted;
    border-inline-end: 2px solid red;
}

בדוגמה הזו, כל הצדדים ב-.my-element מוגדרים כבעלי גבול מנוקד בצבע 2px, שהוא הצבע הנוכחי של הטקסט. גבול inline-end מוגדר לאחר מכן כ2px, מלא ואדום. המשמעות היא שבשפות שנכתבות משמאל לימין, כמו אנגלית, הגבול האדום יופיע בצד ימין של התיבה. בשפות הנכתבות מימין לשמאל — כמו ערבית — הגבול האדום יופיע בצד שמאל של התיבה.

התמיכה בדפדפן מגוונת למאפיינים לוגיים בגבולות, לכן חשוב לבדוק את התמיכה לפני השימוש.

רדיוס גבול

כדי ליצור תיבה עם פינות מעוגלות, השתמשו במאפיין border-radius.

.my-element {
    border-radius: 1em;
}

הקיצור הזה מוסיף גבול עקבי לכל פינה של התיבה. בדומה למאפייני גבול אחרים, ניתן להגדיר את רדיוס הגבול בכל צד באמצעות האפשרויות border-top-left-radius, border-top-right-radius, border-bottom-right-radius ו-border-bottom-left-radius.

אפשר גם לציין את הרדיוס של כל פינה בקיצור לפי הסדר: שמאל למעלה, ימין למעלה, ימין למטה ואז שמאל למטה.

.my-element {
    border-radius: 1em 2em 3em 4em;
}

על ידי הגדרת ערך יחיד לפינה, ייעשה שימוש מקוצר נוסף מפני שרדיוס הגבול מפוצל לשני חלקים: הצד האנכי והצדדים האופקיים. כלומר, כשמגדירים את border-top-left-radius: 1em, מגדירים את הרדיוס שבפינה השמאלית העליונה העליונה ואת הרדיוס השמאלי העליון.

אפשר להגדיר את שני המאפיינים בכל פינה באופן הבא:

.my-element {
    border-top-left-radius: 1em 2em;
}

הפעולה הזאת תוסיף את הערך border-top-left-top של 1em ואת הערך border-top-left-left של 2em. הפעולה הזו ממירה את רדיוס הגבול השמאלי העליון לרדיוס אליפטי, במקום לרדיוס המעגלי המוגדר כברירת מחדל.

תוכלו להגדיר את הערכים האלה בקיצור border-radius, באמצעות / כדי להגדיר את הערכים האליפטיים אחרי הערכים הסטנדרטיים. כך תוכלו להיות יצירתיים וליצור כמה צורות מורכבות.

.my-element {
    border: 2px solid;
  border-radius: 95px 155px 148px 103px / 48px 95px 130px 203px;
}

תמונות גבולות

ב-CSS לא צריך רק להשתמש בשוליים המבוססים על קווים. אפשר גם להשתמש בכל סוג של תמונה באמצעות border-image. מאפיין הקיצור הזה מאפשר להגדיר את תמונת המקור, את אופן הפריסה של התמונה, את רוחב התמונה, את המרחק מהשוליים ואת האופן שבו התמונה צריכה לחזור.

.my-element {
  border-image-source: url(https://assets.codepen.io/174183/border-image-frame.jpg);
  border-image-slice: 61 58 51 48;
  border-image-width: 20px 20px 20px 20px;
  border-image-outset: 0px 0px 0px 0px;
  border-image-repeat: stretch stretch;
}

המאפיין border-image-width דומה ל-border-width: זהו האופן שבו מגדירים את הרוחב של תמונת הגבול. בעזרת המאפיין border-image-outset אפשר להגדיר את המרחק בין תמונת הגבול לבין התיבה שהיא עוטפת.

border-image-source

התג border-image-source (המקור של תמונת הגבול) יכול להיות url של כל תמונה חוקית, שכוללת הדרגות של CSS.

.my-element {
    border-image-source: url('path/to/image.png');
}

.my-element {
    border-image-source: linear-gradient(to bottom, #000, #fff);
}

border-image-slice

המאפיין border-image-slice הוא מאפיין שימושי שמאפשר לחתוך תמונה ל-9 חלקים, שמורכבים מ-4 שורות מפוצלות. הוא פועל כמו הקיצור של margin שבו מגדירים את ערך ההיסט העליון, הימני, התחתון והשמאלי.

.my-element {
    border-image: url('image.jpg');
    border-image-slice: 61 58 51 48;
}

התמונה שמשמשת בהדגמה עם ארבעת הפרוסות שמוצגות עם קווים כחולים

לאחר שהגדרתם את ערכי ההיסט, יש לכם עכשיו 9 קטעים בתמונה: 4 פינות, 4 קצוות וחלק אמצעי. הפינות חלות על הפינות של הרכיב עם תמונת הגבול. הקצוות חלים על הקצוות של אותו רכיב. המאפיין border-image-repeat מגדיר את האופן שבו הקצוות ימלאו את השטח שלהם, והמאפיין border-image-width קובע את גודל הפרוסות.

לסיום, מילת המפתח fill קובעת אם הקטע האמצעי, משמאל לחיתוך, ישמש כתמונת הרקע של הרכיב.

border-image-repeat

border-image-repeat הוא האופן שבו אתם מגדירים ל-CSS איך שתרצו שתמונת הגבול תחזור על עצמה. היא פועלת בדיוק כמו background-repeat.

  • הערך הראשוני הוא stretch, שמרחיב את תמונת המקור כך שתמלא את השטח הזמין במידת האפשר.
  • הערך של repeat מסמן את הקצוות של תמונת המקור כמה שיותר פעמים. כדי לעשות זאת, הוא עשוי לחתוך את אזורי הקצה.
  • הערך של round זהה לערך של החזרה, אבל במקום לחתוך את אזורי הקצה של התמונה כדי שיתאימו לכמה שיותר, הוא נמתח את התמונה וחוזר עליה כדי ליצור חזרה חלקה
  • הערך של space זהה שוב לערך של חזרה, אבל הוא מוסיף רווח בין כל אזור קצה כדי ליצור תבנית חלקה.

בדיקת ההבנה

בחינת הידע שלכם בנושא גבולות

מהו צבע הגבול המוגדר כברירת מחדל?

black
כדאי לנסות שוב.
white
כדאי לנסות שוב.
currentColor
ערך ה-CSS המיוחד הזה ייצג את הערך המחושב של text-color, וזהו צבע הגבול המוגדר כברירת מחדל.
historicColor
זה מורכב. כדאי לנסות שוב.
 
.my-element {
  border: solid hotpink;
}

מהו רוחב ברירת המחדל של גבול?

1px
כדאי לנסות שוב.
medium
🎉
solid
זהו ערך border-style ולא ערך border-width.

border-inline: 1px solid רוצה...

הוספת גבולות לשמאל ולימין (בפריסות לטיניות).
🎉
הוספת גבולות לחלק העליון והתחתון (בפריסות לטיניות).
בפריסה לטינית כמו אנגלית, border-block יוצג למעלה ולמטה.
להוסיף גבולות בפנים.
כדאי לנסות שוב.
להציב גבולות בשורה הראשונה.
כדאי לנסות שוב.