CSS border-style 属性
- الصفحة السابقة border-start-start-radius
- 下一页 border-top
تعریف و استفاده
ویژگی border-style برای تنظیم سبك همه حاشيههای عنصر استفاده میشود، یا به صورت جداگانه برای هر كدام از حاشيهها.
تنها زماني كه اين مقدار none نيست، حاشيهها ممكن است ظاهر شوند.
مثال 1
حاشيه: نقطه دار خطي دوگانه خط بيپايان;
- حاشيه سمت بالا نقطه دار هستند
- حاشيه سمت راست خطي هستند
- حاشيه پايين خط دوگانه هستند
- حاشيه چپ خطي بيپايان هستند
مثال 2
حاشيه: نقطه دار خطي دوگانه;
- حاشيه سمت بالا نقطه دار هستند
- حاشيه سمت راست و چپ خطي هستند
- حاشيه پايين خط دوگانه هستند
مثال 3
حاشيه: نقطه دار خطي;
- حاشيه سمت بالا و پايين نقطه دار هستند
- حاشيه سمت راست و چپ خطي هستند
مثال 4
حاشيه: نقطه دار;
- تمام 4 حاشيهها نقطه دار هستند
باز ديدن:
CSS درس:CSS 边框
دليل HTML DOM:خاصية borderStyle
جافا سكربت:
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 |
- الصفحة السابقة border-start-start-radius
- 下一页 border-top