نعم، نعلم: يمكننا ضبط عرض الحدود. يمكن أن يكون عرض الحدود 5 بكسل، أو 10 بكسل، أو 20 بكسل، أو أي قيمة.
ومع ذلك، هل سبق لك أن تخيلت أنه يمكنك تعيين لون منفصل لكل حدود 1 بكسل؟ ما هو هذا المفهوم؟ وهذا يعني أنه إذا قمت بتعيين حد بقيمة 10 بكسل لعنصر ما، فيمكنك تعيين 10 ألوان لمنطقة الحدود البالغة 10 بكسل هذه. كل 1 بكسل عبارة عن طبقة (مجموعة). العرض التوضيحي: شرح تفصيلي لمجموعات متعددة من ألوان الحدود في ألوان حدود CSS3
حسنًا، دعنا نراجع كيفية تعيين حجم الحدود للعناصر (كتلة التعليمات البرمجية 1):
يشير الكود أعلاه إلى أننا حددنا حدًا بحجم 6 بكسل لعنصر div باستخدام اختبار className. بالطبع، هذا مستطيل بأربعة جوانب.
لذلك، يمكن بالفعل تحسين كود CSS هذا إلى (كتلة التعليمات البرمجية 2):
من خلال الكود المكرر، وجدنا أنه يمكننا بالفعل تعيين الألوان لجوانب المستطيل الأربعة. أما فيما يتعلق بما إذا كان يجب ضبط الألوان على نفس اللون أو مختلفة، فهذا يعتمد على احتياجاتك الخاصة.
عند تشغيل التعليمات البرمجية المكررة (بالطبع يمكنك تغيير لون كل جانب)، ترى مستطيلاً بحد أسود بحجم 6 بكسل. حسنًا، هذا ما نتوقعه.
ومع ذلك، يمكننا الآن تقسيم الحد 6 بكسل إلى 6 مجموعات، كل 1 بكسل عبارة عن مجموعة واحدة، لذلك يمكن ضبط كل حد على ما يصل إلى 6 ألوان مختلفة.
كيف تفعل ذلك؟ ألقِ نظرة (كتلة التعليمات البرمجية الثالثة):
.امتحان{
عرض الحدود: 6 بكسل؛
نمط الحدود: صلب؛
ألوان الحدود العلوية:#000 #fff #999 #aaa #ccc #eee;
ألوان الحدود اليمنى:#000 #fff #999 #aaa #ccc #eee;
ألوان الحدود السفلية:#000 #fff #999 #aaa #ccc #eee;
ألوان الحدود اليسرى:#000 #fff #999 #aaa #ccc #eee;
}
.امتحان{
عرض الحدود: 6 بكسل؛
نمط الحدود: صلب؛
لون الحدود العلوي: #000؛
لون الحدود الأيمن:#000;
لون الحد السفلي:#000;
لون الحدود اليسرى:#000;
}
.امتحان{
الحدود: 6 بكسل الصلبة #000؛
}
<div class="test">اختبر إعدادات ألوان الحدود</div>