CSS border-style 属性

تعریف و استفاده

ویژگی border-style برای تنظیم سبك همه حاشيه‌های عنصر استفاده می‌شود، یا به صورت جداگانه برای هر كدام از حاشيه‌ها.

تنها زماني كه اين مقدار none نيست، حاشيه‌ها ممكن است ظاهر شوند.

مثال 1

حاشيه: نقطه دار خطي دوگانه خط بي‌پايان;
  • حاشيه سمت بالا نقطه دار هستند
  • حاشيه سمت راست خطي هستند
  • حاشيه پايين خط دوگانه هستند
  • حاشيه چپ خطي بي‌پايان هستند

مثال 2

حاشيه: نقطه دار خطي دوگانه;
  • حاشيه سمت بالا نقطه دار هستند
  • حاشيه سمت راست و چپ خطي هستند
  • حاشيه پايين خط دوگانه هستند

مثال 3

حاشيه: نقطه دار خطي;
  • حاشيه سمت بالا و پايين نقطه دار هستند
  • حاشيه سمت راست و چپ خطي هستند

مثال 4

حاشيه: نقطه دار;
  • تمام 4 حاشيه‌ها نقطه دار هستند

باز ديدن:

CSS درس:CSS 边框

دليل HTML DOM:خاصية borderStyle

مثال

تعيين أنواع الحواف لأربعة جوانب:

p
  {
  border-style:solid;
  }

تجربة شخصية

جافا سكربت:

border-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;

قيمة الخاصية

القيم الوصف
none يُحدد حافة بدون حواف.
hidden مثل "none"، باستثناء التطبيق على الجداول، حيث يستخدم "hidden" لحل نزاعات الحواف.
dotted يُحدد حافة نقاط. يُعرض في معظم المتصفحات كخط صلب.
dashed يُحدد خطًا خياليًا. يُعرض في معظم المتصفحات كخط صلب.
solid يُحدد خطًا صلبًا.
double يُحدد خطين. عرض الخطين يساوي قيمة border-width.
groove يُحدد حافة grooved ثلاثية الأبعاد. تأثيره يعتمد على قيمة border-color.
ridge يُحدد حافة ridged ثلاثية الأبعاد. تأثيره يعتمد على قيمة border-color.
inset يُحدد حافة inset ثلاثية الأبعاد. تأثيره يعتمد على قيمة border-color.
outset يُحدد حافة outset ثلاثية الأبعاد. تأثيره يعتمد على قيمة border-color.
inherit يُحدد أن يتم توريث أنواع الحواف من العنصر الأم.

الوصف

أقل أنواع الحواف تنبؤية هي double. يُعرف بأنها عرض خطين بالإضافة إلى المسافة بينهما تساوي قيمة border-width. ومع ذلك، لا يوضح معيار CSS ما إذا كان خطاً واحداً أعرض من الخط الآخر أو ما إذا كان يجب أن يكون عرضهما متساويين، ولا يوضح أيضًا ما إذا كان المسافة بينهما يجب أن تكون أكثر من عرض الخط. كل هذا يقرره وكيل المستخدم، وليس للفنان تأثير على هذا القرار.

تفاصيل التقنية

القيمة الافتراضية: لم يتم تحديده
التنسيق: لا
الإصدار: CSS1
جافا سكربت: object.style.borderStyle="dotted double"

مزيد من الأمثلة

تعيين أنواع الحواف لأربعة جوانب
هذا المثال يوضح كيفية تعيين أنواع الحواف لأربعة جوانب.
تعيين حواف مختلفة لكل جانب
هذا المثال يوضح كيفية تعيين أنواع الحواف المختلفة للأطراف المختلفة للعنصر.

دعم المتصفح

الرقم في الجدول يوضح الإصدار الأولي من المتصفح الذي يدعم هذه الخاصية بالكامل.

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 3.5