כיצד להוסיף גבול כפול עם צבעים שונים?
כדי להוסיף גבול כפול לכל צורה באמצעות CSS, ' :לפני 'הבורר מפורסם. זה משנה את הצבעים של שני הגבולות כדי להפוך אותם לייחודיים. ההליך המפורט להלן להוספת גבול כפול עם צבעים שונים:
שלב 1: הוסף רכיב Div והקצה כיתות
בקובץ ה-HTML, הוסף את רכיב div בתוך התג
והקצה ' מעמד ' עם השם של ' גבול כפול '. משתמשים יכולים ליצור גם שם כיתה משלהם:< div מעמד = 'גבול כפול' >
< / div >
שלב 2: צור תג סגנון
בשלב זה, צור חלק עבור הכיתה ' גבול כפול ' ועשה את זה עותק אחד עם ' :לפני ' בוחר. בדרך זו, מאפייני ה-CSS יחולו על השיעורים שלנו:
< סִגְנוֹן >
.לְהַכפִּיל- גבול {
}
.לְהַכפִּיל- גבול :לפני {
}
< / סִגְנוֹן >
שלב 3: הוסף סגנונות לכיתה
מאפייני ה-CSS חלים על אלמנט div שיש לו מחלקה של ' גבול כפול '. הסגנונות הבאים מוזכרים להלן:
.לְהַכפִּיל- גבול {
רקע כללי- צֶבַע : #ccc;
גבול : 4 פיקסלים ירוק מלא;
ריפוד: 50px;
רוֹחַב : 16px;
גוֹבַה : 16px;
עמדה: קרוב משפחה;
שולים: 0 אוטומטי;
}
התיאור של מאפייני CSS ניתן להלן:
- ראשית, הוסף ' צבע רקע ' שהוא אפור וה' גבול ' במשקל 4 פיקסלים וצבע ירוק.
- ה ' ריפוד ' של 50 פיקסלים כדי ליצור את החלל הפנימי של 50 פיקסלים מכל הצדדים.
- בסופו של דבר, ה' רוֹחַב ' ו' גוֹבַה' של 16 פיקסלים. וגם ה ' שולים ” הוא 0 אוטומטי כלומר השוליים העליונים והתחתונים יהיו אפס ושמאליים.
דף האינטרנט נראה כך:
הפלט מציג שהגבול מוחל על 'div'.
שלב 4: הוספת בורר CSS
כעת, עברו לכיוון התיבה השנייה בתגית הסגנון הכוללת את ' :לפני ' בורר מצורף, וכתוב את הקוד שלהלן:
.לְהַכפִּיל- גבול :לפני {רקע כללי : אף אחד;
גבול : 4px כחול מלא;
תוֹכֶן : '' ;
מיקום: מוחלט;
למעלה: 4 פיקסלים;
שמאל: 4 פיקסלים;
מימין: 4 פיקסלים;
תחתון: 4 פיקסלים;
}
המאפיינים מוסברים להלן:
- להשתמש ב ' עמדה ' תכונה כדי להפוך את המיקום של אלמנט קבוע.
- לאחר מכן, ה' למעלה, שמאל, ימין ולמטה ' מגדיר את השוליים של הפריט החדש שנוצר מהמקורי.
- בורר CSS בשם ': לפני ' מוסיף תוכן מול אלמנט נבחר.
הפלט נראה כך:
כך ניתן להוסיף גבול כפול באמצעות צבעים שונים.
סיכום
כדי להוסיף גבול כפול, צור תחילה רכיב div והקצה אותו למחלקה. לאחר מכן, הוסף את ה-CSS ' עמדה ' מאפיין שיש להגדיר כיחסי. לאחר מכן, הוסף אליו את בורר ה-CSS ':before' כך שמשתמשים יוכלו להוסיף תוכן לפני אלמנט נבחר. מדריך זה הדגים את השימוש בגבולות כפולים עם צבעים שונים.