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