كيف تضيف حد مزدوج بألوان مختلفة؟
لإضافة حد مزدوج على أي شكل باستخدام CSS ، فإن الخيار ' :قبل 'المحدد مشهور. يغير ألوان كلا الحدود لجعلها فريدة من نوعها. الإجراء خطوة بخطوة الموضح أدناه لإضافة حد مزدوج بألوان مختلفة:
الخطوة 1: إضافة عنصر Div وتعيين فئات
في ملف HTML ، أضف عنصر div داخل علامة
وعيّن ' فصل 'باسم' حد مزدوج '. يمكن للمستخدمين إنشاء اسم الفصل الخاص بهم أيضًا:< شعبة فصل = 'حد مزدوج' >
< / شعبة >
الخطوة 2: إنشاء علامة نمط
في هذه الخطوة ، قم بإنشاء جزء للفصل ' حد مزدوج 'وجعلها نسخة واحدة مع' :قبل 'المحدد. بهذه الطريقة ، سيتم تطبيق خصائص CSS على فئاتنا:
< أسلوب >
.مزدوج- حدود {
}
.مزدوج- حدود :قبل {
}
< / أسلوب >
الخطوة 3: إضافة أنماط إلى الفصل
تنطبق خصائص CSS على عنصر div الذي يحتوي على فئة ' حد مزدوج '. الأنماط التالية مذكورة أدناه:
.مزدوج- حدود {
خلفية- لون : #ccc؛
حدود : 4 بكسل خضراء صلبة ؛
الحشو: 50 بكسل ؛
عرض : 16 بكسل ؛
ارتفاع : 16 بكسل ؛
الموقف: نسبي ؛
هامِش: 0 آلي؛
}
فيما يلي وصف خصائص CSS:
- أولاً ، أضف ' لون الخلفية 'وهو اللون الرمادي و' حدود 'بوزن 4 بكسل ولون أخضر.
- ال ' حشوة 'بحجم 50 بكسل لإنشاء مساحة داخلية تبلغ 50 بكسل من جميع الجوانب.
- في النهاية ، ' عرض ' و ' ارتفاع' 16 بكسل. أيضا ، ' هامِش 'هو 0 تلقائي مما يعني أن الهوامش العلوية والسفلية ستكون صفراً وأيسر.
تبدو صفحة الويب كما يلي:
يعرض الإخراج أنه يتم تطبيق الحد على 'div'.
الخطوة 4: إضافة CSS Selector
الآن ، انتقل إلى المربع الثاني في علامة النمط الذي يحتوي على ' :قبل 'المحدد مرفق ، واكتب الكود أدناه:
.مزدوج- حدود :قبل {خلفية : لا أحد؛
حدود : 4 بكسل أزرق صلب ؛
محتوى : '' ؛
الموقف: مطلق.
أعلى: 4 بكسل ؛
اليسار: 4 بكسل ؛
اليمين: 4 بكسل ؛
أسفل: 4 بكسل ؛
}
الخصائص موضحة أدناه:
- استخدم ال ' موضع 'لجعل موضع عنصر ثابتًا.
- بعد ذلك ، ' أعلى ، يسار ، يمين ، وأسفل يحدد 'هامش العنصر الذي تم إنشاؤه حديثًا من العنصر الأصلي.
- محدد CSS يسمى ': قبل 'يضيف محتوى أمام العنصر المختار.
يبدو الإخراج كما يلي:
هذه هي الطريقة التي يمكن بها إضافة حد مزدوج باستخدام ألوان مختلفة.
خاتمة
لإضافة حد مزدوج ، قم بإنشاء عنصر div أولاً وقم بتعيينه إلى فئة. ثم أضف CSS ' موضع 'التي يجب تعيينها على نسبي. بعد ذلك ، أضف CSS Selector ': before' ليتمكن المستخدمون من إضافة المحتوى قبل العنصر المختار. يوضح هذا الدليل استخدام حدود مزدوجة بألوان مختلفة.