גבול CSS הוא מאפיין מפתח המשמש לאפיון ולסגנון של הגבולות סביב רכיבי HTML. גבולות תופסים חלק חיוני בהרכבת האתר, ומסייעים ביצירת הפרדה, הדגשה ופיתוי מסוגנן. ב-CSS, אתה יכול להשתמש בכמה מאפיינים הקשורים לגבולות כדי לשלוט בסגנון, במגוון, בגודל ובצורה של גבולות אלה. במאמר זה נחקור את מאפייני הגבול של ה-CSS וכיצד לנצל אותם באמת.
מאפייני גבולות CSS
מאפייני הגבול של CSS משמשים כדי לקבוע את הסגנון, המגוון, הרוחב והשפל של הגבולות של רכיב. נכסים אלה כוללים:
- בסגנון גבול
- צבע גבול
- רוחב גבול
- גבול-רדיוס
1) בסגנון גבול CSS
המאפיין Border style משמש לציון סוג הגבול שברצונך להציג בדף האינטרנט.
ישנם כמה ערכי סגנון גבול המשמשים עם מאפיין בסגנון גבול כדי להגדיר גבול.
| ערך | תיאור |
|---|---|
| אף אחד | זה לא מגדיר שום גבול. |
| מְנוּקָד | הוא משמש להגדרת גבול מנוקד. |
| מקווקו | הוא משמש להגדרת גבול מקווקו. |
| מוצק | הוא משמש להגדרת גבול מוצק. |
| לְהַכפִּיל | זה מגדיר שני גבולות עם אותו ערך רוחב גבול. |
| חָרִיץ | זה מגדיר גבול מחורץ תלת מימדי. האפקט נוצר בהתאם לערך צבע הגבול. |
| רֶכֶס | הוא מגדיר גבול תלת מימדי. האפקט נוצר בהתאם לערך צבע הגבול. |
| הַבלָעָה | זה מגדיר גבול הכנסה תלת מימדית. האפקט נוצר בהתאם לערך צבע הגבול. |
| רֵאשִׁית | זה מגדיר גבול התחלה תלת מימדי. האפקט נוצר בהתאם לערך צבע הגבול. |
דוגמא:
.border-example { width: 150px; height: 30px; margin: 10px; padding: 10px; } .dotted { border: 2px dotted #FFA500; } .dashed { border: 2px dashed #008000; } .solid { border: 2px solid #000; } .double { border: 4px double #FF0000; } .groove { border: 3px groove #3333FF; } .ridge { border: 3px ridge #660066; } .inset { border: 3px inset #006600; } .outset { border: 3px outset #990000; } Dotted Border Dashed Border Solid Border Double Border Groove Border Ridge Border Inset Border Outset Border תְפוּקָה:
2) רוחב גבול CSS
המאפיין border-width משמש להגדרת רוחב הגבול. זה מוגדר בפיקסלים. אתה יכול גם להשתמש באחד משלושת הערכים המוגדרים מראש, דק, בינוני או עבה כדי להגדיר את רוחב הגבול.
הערה: המאפיין Border-width אינו מנוצל לבדו. הוא מנוצל כל הזמן עם מאפייני גבול אחרים כמו מאפיין 'בסגנון גבול' כדי להגדיר את הגבול תחילה בכל דרך אחרת שהוא לא יעבוד.
/* CSS for different border widths */ .thin-border { border: 2px solid #FF0000; /* It is 2-pixel wide solid red border */ } .medium-border { border: 4px solid #00FF00; /* It is 4-pixel wide solid green border */ } .thick-border { border: 6px solid #0000FF; /* It is 6-pixel wide solid blue border */ } .custom-border { border: 3px dashed #FFA500; /* It is 3-pixel wide dashed orange border */ } <p class="thin-border"> Thin Border </p> <p class="medium-border"> Medium Border </p> <p class="thick-border"> Thick Border </p> Custom Border תְפוּקָה:
3) צבע גבול CSS
ישנן שלוש אסטרטגיות לקביעת צבע הגבול.
- שם: הוא קובע את שם הצבע. למשל: 'אדום'.
- RGB: הוא קובע את ערך ה-RGB של הצבע. לדוגמה: 'rgb(255,0,0)'.
- hex: זה קובע את ערך הhex של הצבע. לדוגמה: '#ff0000'.
הערה: מאפיין צבע הגבול אינו מנוצל לבדו. הוא מנוצל כל הזמן עם מאפייני גבול אחרים כמו מאפיין 'בסגנון גבול' כדי להגדיר את הגבול תחילה בכל דרך אחרת שהוא לא יעבוד.
דוגמא:
.my-element { width: 200px; height: 100px; border: 2px solid #333; /* The Initial border color is dark gray */ transition: border-color 0.5s; /* Adding a smooth transition effect */ } .my-element:hover { border-color: blue; /* This changes the border color to blue when hovering */ } Hover תְפוּקָה:
