حواف CSS

صفة حافة CSS

CSS حافة تسمح الصفة بتعيين نمط، عرض وألوان حافة العنصر.

جميع حوافي لها حواف.

لدي حافة سفلية حمراء.

لدي حافة منحنية.

لدي حافة يسار زرقاء.

نمط حافة CSS

border-style تعيين الصفة نوع الحافة الذي سيتم عرضه.

يسمح بالقيم التالية:

  • نقاط - تعريف حافة نقاط
  • خطي مكسور - تعريف حافة خطية مكسورة
  • صلبة - تعريف حافة خطية
  • مزدوج - تعريف حافة مزدوجة
  • groove - تعريف حافة 3D groove. تأثير يعتمد على قيمة حافة اللون
  • ridge - تعريف حافة 3D ridge. تأثير يعتمد على قيمة حافة اللون
  • inset - تعريف حافة 3D inset. تأثير يعتمد على قيمة حافة اللون
  • outset - تعريف حافة 3D outset. تأثير يعتمد على قيمة حافة اللون
  • لا شيء - تعريف حافة بدون حافة
  • مخفي - تعريف حافة مخفية

border-style يمكن للصفة تعيين قيمة واحدة إلى أربع قيم (للحافة العلوية، الحافة اليمنى، الحافة السفلية والحافة اليسرى).

مثال

عرض أنواع حواف مختلفة:

p.dotted {حافة نقاط;}
p.dashed {حافة خطي مكسور;}
p.solid {حافة صلبة;}
p.double {حافة مزدوجة;}
p.groove {حافة 3D groove. تأثير يعتمد على قيمة حافة اللون;}
p.ridge {حافة 3D ridge. تأثير يعتمد على قيمة حافة اللون;}
p.inset {حافة 3D inset. تأثير يعتمد على قيمة حافة اللون;}
p.outset {حافة 3D outset. تأثير يعتمد على قيمة حافة اللون;}
p.none {حافة غير موجودة;}
p.hidden {حافة غير مرئية;}
p.mix {border-style: dotted dashed solid double;}

النتيجة:

حواف نقاط.

حواف خطي.

حواف خط مستقيم.

حواف خطين.

حواف grooved. تأثيرها يعتمد على قيمة border-color.

حواف ridged. تأثيرها يعتمد على قيمة border-color.

حواف 3D inset. تأثيرها يعتمد على قيمة border-color.

حواف 3D outset. تأثيرها يعتمد على قيمة border-color.

حواف بدون حواف.

حواف مخفية.

حواف مدمجة.

جرب ذلك بنفسك

ملاحظة:إلا إذا تم تعيينها border-style إذا لم يتم تعيين الخاصية، فإن جميع خصائص حواف CSS الأخرى (سيتم شرحها في الفصل التالي) لن تكون لها أي تأثير!