الحدود Borders

خصائص الحدود في CSS

تسمح لك خصائص الحدود في CSS لتحديد التصميم واللون لحدود العنصر

---

شكل / تصميم الحدود

تحدد خاصية border-style نوع الحدود التي ستعرض في المتصفح

ملاحظة: لن يتم عرض أي شكل للحدود مال يتم تعيين قيمة في الخاصية border-style

---

القيم المتعلقة بخاصية border-style

1. لايوجد none : لن يتم عرض أي حدود للعنصر


2. منقط dotted : يعرّف حدود منّقطة


3. مشخّط : dottedيعرّف حدود مشخّطة


4. صلب solid : يعرّف حدود صلبة أي على شكل خط


5. مزدوج double : يعرّف حدود مزدوجة . العرض بين الحدود هو نفسه القيمة border-width


6. نموذجي groove : يعرّف حدود نموذجية ثلاثية الأبعاد 3D والتأثير يعتمد على قيمة لون الحدود border-color


7. سلسلة ridge : يعرّف الحدود على شكل سلسلة ثلاثية الأبعاد 3D والتأثير يعتمد على قيمة لون الحدود border-color


8. تدرج داخلي inset : يعرّف حدود متدرجة داخلية ثلاثية الأبعاد 3D والتأثير يعتمد على قيمة لون الحدود border-color


9. درج خارجي outset : يعرّف حدود متدرجة خارجية ثلاثية الأبعاد 3D والتأثير يعتمد على قيمة لون الحدود border-color

---

عرض الحدود

تستخدم خاصية border-width لضبط عرض الحدود

يتم تحديد العرض من خلال وحدة البكسل أو باستخدام واحدة من ثلاثة قيم وهم رفيع thin متوسط medium أو ثخين thick

ملاحظة: لاتعمل خاصية border-width لوحدها إنما تستخدم قبلها خاصية border-style

مثال

p.one
{
border-style:solid;
border-width:5px;
}
p.two
{
border-style:solid;
border-width:medium;
}

لون الحدود

يمكن تلوين الحدود من خلال خاصية border-color . يمكن استخدام احدى هذه الأنواع لاستخدام اللون

• باستخدام قيمة HEX مثال "#FFFFFF"


• باستخدام قيمة RGB مثال "rgb(255,0,0)"


• باستخدام اسم اللون مثل "Red"

يمكنك أيضاً استخدام القيمة "شفاف - transparent " في خاصية لون الحدود .

ملاحظة: لاتعمل خاصية border-color ان تم استخدامها لوحدها لهذا يجب استخدام أولاً الخاصية border-style

مثال

p.one
{
border-style:solid;
border-color:red;
}
p.two
{
border-style:solid;
border-color:#98bf21;
}

---

أجزاء الحدود المستقلة

باستخدام لغة CSS يمكنك تعيين جزء منفصل من الحدود كاليمين أو اليسار فقط أو تعيين كل جزء بنوع معين من أنواع الحدود .

مثال

p
{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}

يمكن أيضاً تعيين أكثر من قيمة من خلال نفس الخاصية

مثال

border-style:dotted solid;

لدى خاصية border-style من واحدة الى أربع قيمة مختلفة

شكل الحدود border-style : منقّط , صلب , مزدوج , مشخّط

• الحد العلوي top border منقّط dotted


• الحد اليمين right border صلب solid


• الحد السفلي bottom border مضاعف double


• الحد اليسار left border مشخّط dashed

شكل الحدود border-style : منقّط , صلب , مزدوج

• الحد العلوي top border منقّط dotted


• الحد اليمين واليسار right and left border صلب solid


• الحد السفلي bottom border مضاعف double

شكل الحدود border-style : منقّط , صلب

• الحد العلوي والسفلي top and bottom border منقّط dotted


• الحد اليمين واليسار right and left border صلب solid

شكل الحدود border-style : منقّط

• جميع الحدود منقّطة dotted

لقد تم استخدام الخاصية border-style في المثال المشروح السابق ويمكن استخدام نفس الشرح حول الخاصيات عرض الحدود border-width ولون الحدود border-color

---

الحدود – تقليص الخاصيات

كما تلاحظ من المثال السابق , هناك العديد من الخاصيات التي يمكن استخدامها مع الحدود .

لتقليص الكود يمكنك تحديد جميع القيم في خاصية واحد كما رأينا مسبقاً وجمع جميع قيم الحدود في خاصية واحدة .

تقليص الخاصية يمكن استخدامها مع خاصية الحدود border

مثال

border:5px solid red;

عند استخدام خاصية الحدود border يمكن وضع القيم التابعة للخاصيات التالية :

• عرض الحدود border-width


• تصميم الحدود border-style


• لون الحدود border-color

لايهم ان تم تجاهل احدى القيم طالما تستخدمهم بالترتيب (على الرغم من أن تصميم الحدود border-style مطلوب) .

---

جميع خاصيات الحدود borders

الخاصية	الشرح
border	تحديد جميع قيم الحدود في خاصية واحدة
border-bottom	ضبط جميع قيم الحدود السفلية في خاصية واحدة
border-bottom-color	ضبط لون الحدود السفلية
border-bottom-style	ضبط التصميم للحدود السفلية
border-bottom-width	ضبط العرض للحدود السفلية
border-color	ضبط اللون للحدود الأربعة
border-left	ضبط جميع قيم حدود اليسار في خاصية واحدة
border-left-color	ضبط لون حدود اليسار
border-left-style	ضبط تصميم حدود اليسار
border-left-width	ضبط عرض حدود اليسار
border-right	ضبط جميع قيم حدود اليمين في خاصية واحدة
border-right-color	ضبط لون حدود اليمين
border-right-style	ضبط تصميم حدود اليمين
border-right-width	ضبط عرض حدود اليمين
border-style	ضبط تصميم الحدود الأربعة
border-top	ضبط جميع قيم الحدود العلوية في خاصية واحدة
border-top-color	ضبط لون الحدود العلوية
border-top-style	ضبط تصميم الحدود العلوية
border-top-width	ضبط عرض الحدود العلوية
border-width	ضبط عرض الحدود الاربعة

---