מדריך שלם לגבולות וקווי מתאר של CSS

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

מה ההבדל בין גבול למתאר ב-CSS?

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

ראשית, קווי מתאר CSS יושבים מחוץ לגבולות. משמעות הדבר היא שהם יכולים לחפוף לתוכן מחוץ לרכיב שאתה מיישם אותם עליו. יחד עם זה, גבולות CSS משנים את הממדים של אלמנט אבל קווי מתאר לא.

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

ערכי CSS Border & Outline של נכס משותף

למרות ההבדלים ביניהם, גבולות וקווי המתאר של CSS חולקים חלק מהערכים שלהם. גם הקיצור שבו אתה משתמש עבור כל אחד מהם דומה מאוד.

קיצור גבולות ו-מתאר של CSS

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

גבול: רוֹחַבסִגְנוֹןצֶבַע;
מתווה: רוֹחַבסִגְנוֹןצֶבַע;

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

גבול: 10px כחול מלא;
מתאר: 20px אדום מלא;

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

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

CSS רוחב גבול ורוחב מתאר

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

רוחב מתאר: 20 פיקסלים;
רוחב הגבול: 10px;

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

CSS בסגנון גבול וסגנון מתאר

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

סגנון גבול: מוצק;
סגנון מתאר: מנוקד;

תוכל למצוא רשימה מלאה של סגנונות הגבול והמתאר השונים של CSS בסוף מאמר זה.

צבע גבול CSS וצבע מתאר

בדומה למאפייני CSS אחרים מבוססי צבע, גבולות וקווי מתאר מקבלים את כל צבעי ה-CSS החוקיים. זה כולל קודי hex, קודי RGB, צבעי קיצור ועוד.

צבע גבול: כחול;
צבע מתאר: #ff0000;

ניתן גם להשתמש בהדרגות צבע בעת עבודה עם גבולות וקווי מתאר של CSS.

ערכי מאפייני גבולות CSS

יחד עם ערכי הרכוש המשותף שלהם, לגבולות ולקווי המתאר יש גם ערכים ייחודיים לחקור. לגבולות CSS יש שני מאפיינים ייחודיים שכדאי ללמוד.

רדיוס גבול CSS

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

border-radius: 20px;

אתה יכול להגדיר ערך יחיד כדי לשנות את הרדיוס של כל הפינות.

אתה יכול גם לפצל את הפינות לקבוצות של ימין למעלה/שמאל למעלה וימין למעלה/שמאל למטה.

border-radius: 10px 20px;

זה מקל על יצירת צורות מעניינות עם רכיבי ה-HTML שלך.

לבסוף, אתה יכול להגדיר לכל פינה רדיוס משלה.

border-radius: 10px 20px 30px 40px;

ערכים אלה חלים בכיוון השעון החל מהפינה השמאלית העליונה.

מאפייני CSS בצד הגבול

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

border-left-width: 10px;
גבול-ימני-רוחב: 20px;
רוחב גבול-עליון: 30px;
border-bottom-width: 40px;

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

סגנון גבול-שמאל: מוצק;
סגנון גבול-ימין: מנוקד;
סגנון גבול-עליון: מקווקו;
בסגנון גבול-תחתון: לְהַכפִּיל;

ואתה יכול לשנות את הצבע של כל צד אם אתה רוצה.

סגנון גבול-שמאל: כחול;
בסגנון גבול-ימין: #ff0000;
סגנון הגבול העליון: #00ff00;
סגנון גבול-תחתון: rgb (0, 0, 255);

צידי גבול CSS עובדים עם הקיצור הרגיל כדי לשלב כך.

גבול-שמאלי: 10px כחול מלא;
גבול-ימין: 20פיקסלים מנוקדים #00ff00;
הגבול העליון: 30פיקסלים מקווקו #ff0000;
גבול-תחתית: 40פיקסלים לְהַכפִּילrgb(0, 0, 255);

ערכי נכס מתאר CSS

כמו גבולות CSS, לקווי מתאר יש תכונה ייחודית משלהם; קיזוז מתאר.

קיזוז מתאר CSS

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

היסט מתאר: 10px;

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

סגנונות גבול ותאר של CSS

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

סגנון גבול: מוצק;
סגנון גבול: מנוקד;
סגנון גבול: מקווקו;
סגנון גבול: חריץ;
סגנון גבול: רכס;
בסגנון גבול: לְהַכפִּיל;
סגנון גבול: שיבוץ;
סגנון גבול: התחלה;
סגנון גבול: מוסתר;
סגנון גבול: אין;

גבולות חולקים את אותם סגנונות עם קווי מתאר, רק עם סגנון מתאר מוגדר כמאפיין.

כיצד להשתמש בגבולות ובקווי מתאר של CSS

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