English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
خصائص border-style CSS هي لتحديد خاصية نمط الحافات الواحدة، وهيborder-top-style,border-right-style,border-bottom-styleوborder-left-styleالخصائص القصيرة.
جدول أدناه يوضح كيفية استخدام هذه الخاصية وتاريخ الإصدارات، وكيفية استخدام هذه الخاصية في جملة الجافا سكربت.
| القيمة الافتراضية: | لا شيء |
|---|---|
| تطبيق ل: | جميع العناصر |
| الوراثة: | لا يوجد |
| يمكن التحريك: | لايرجى الرجوع إلى خصائص التحريك. |
| الإصدار: | CSS 1،2،3 |
| جملة JavaScript: | object object.style.borderStyle="dotted double" |
جملة هذه الخاصية كالتالي:
border-style: [ none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset ] 1 to 4 values | initial | inherit
يمكن استخدام هذا الرمز المختصر لقيمة واحدة، إثنتين، ثلاث أو أربعة أرقام منفصلة بفضاء.
إذا تم تحديدقيمة واحدة، يتم تطبيقها على جميع الحواف الأربعة.
إذا تم تحديدقيمتان، يتم تطبيق القيمة الأولى على الحواف العلوية والسفلية، والقيمة الثانية على الحواف اليمنى واليسرى.
إذا تم تحديدثلاثة قيم، يتم تطبيق القيمة الأولى على الحافة العلوية، والقيمة الثانية على الحواف اليسرى واليمنى، والقيمة الثالثة على الحافة السفلية.
إذا تم تحديدأربعة قيم، يتم تطبيق كل قيمة على التوالي على الحواف من الأعلى، اليمنى، السفلى واليسرى.
في المثال أدناه، يتم عرض كيفية استخدام خاصية border-style.
p {
border-style: double;
border-width: 5px;
}اختبار لرؤية‹/›جدول أدناه يصف قيمة هذه الخاصية.
| قيمة | وصف |
|---|---|
| لا شيء | لا يظهر الحدود.} |
| hidden | مثل none، لكن الفرق هو أن خلايا الجدول تحتوي علىالحدود الملتويةوتبادل الخلايا الحدود. |
| dotted | يظهر الحافة كسلسلة من النقاط. |
| dashed | يظهر الحافة كسلسلة من الخطوط القصيرة، مثل السلسلة. |
| solid | يظهر الحافة كخط كامل. |
| double | يظهر الحافة كخطين متوازيين من الخطوط الكاملة، مع حجمان بينهما. مجموع الخطين مع الفجوة بينهما يساويborder-widthالقيمة. |
| groove | يظهر حافة مدمجة في اللوحة. إنها تعطي انطباعًا ثلاثي الأبعاد، عادة من خلال استخدام لون أكثر قتامة من لون الحافة.border-colorأكثر إشراقًا وأعمق اللونين، يتم إنشاؤها باستخدام ظل. |
| ridge | يظهر حافة العنصر التي تبدو وكأنها منحنية في اللوحة. إنها تعطي انطباعًا ثلاثي الأبعاد، حيث تبدو الحافة وكأنها تخرج من اللوحة. |
| inset | يظهر حافة العنصر التي تبدو وكأنها مدمجة في اللوحة. إنها تعطي انطباعًا ثلاثي الأبعاد، عادة من خلال إنشاء ظل باستخدام لونين مختلفين، أكثر من لون الحافة.border-colorأكثر إشراقًا وأعمق. |
| outset | يظهر حافة العنصر التي تبدو وكأنها مدمجة في اللوحة. إنها تعطي انطباعًا ثلاثي الأبعاد، حيث تجعل الحافة تبدو وكأنها تخرج من اللوحة. |
| inherit | إذا تم تحديد، فإن العنصر المرتبط يستخدم نفس قيمة border-top-style للعنصر الأم. |
مستوى التطابق للمتصفحات الخاص بخصائص border-style، الأرقام في الجدول التالي تمثل أحدث إصدار من المتصفح يدعم هذه الخاصية؛ جميع المتصفحات الشائعة يدعمون هذه الخاصية.
دعم المتصفحات–
|
تحذير: لا يدعم إصدار Internet Explorer 7 وأولى إصداراته قيمة hidden. يدعم الإصدار IE8، لكنه يحتاج إلى<!DOCTYPE>. يدعم الإصدار IE9 وما فوق قيمة hidden هذه.
انظر إلى التعليمات التالية:CSS Border,CSS3 Border.
خصائص مرتبطة:border,border-width,border-color,border-top-style,border-right-style,border-bottom-style,border-left-style.