خصائص عرض الحدود الداخلية لـ CSS

الصفحة السابقة border-inline-style
الصفحة التالية border-left

التعريف والاستخدام

border-inline-width الصفة تعيين عرض الخط العريض للعنصر في الاتجاه الداخلي.

ملاحظة:لجعل border-inline-width للصفة أن تكون فعالة، يجب إعداد border-inline-style.

border-inline-width يمكن تعيين قيمة الصفة بطرق مختلفة:

إذا border-inline-width الصفة لديها قيمتين:

border-inline-width: 10px 50px;

الخط العريض في بداية السطر 10px
الخط العريض في نهاية السطر 50px

إذا border-inline-width الصفة لديها قيمة واحدة:

border-inline-width: 10px;

الخط العريض في بداية السطر والنهاية السطر 10px

CSS border-inline-width 属性与 CSS 属性 border-bottom-width،border-left-width،border-right-width و border-top-width مماثلة جدًا، لكن border-inline-width يعتمد الخاصية على الاتجاه الداخلي.

ملاحظة:خصائص CSS ذات الصلة writing-mode،text-orientation و direction يحدد الاتجاه الداخلي. هذا يؤثر على بداية ونهاية موقع السطر، وكذلك border-inline-width نتيجة الخاصية. للصفحات الإنجليزية، الاتجاه الداخلي من اليسار إلى اليمين، الاتجاه الظاهري من الأسفل إلى الأعلى.

مثال

مثال 1

ضبط عرض الحدود في الاتجاه الداخلي:

#example1 {
  border-inline-style: solid;
  border-inline-width: 10px;
}
#example2 {
  border-inline-style: dashed;
  border-inline-width: thin thick;
}

جرب بنفسك

مثال 2: دمج خاصية writing-mode

موقع الحدود عند بداية ونهاية الاتجاه الداخلي يتأثر writing-mode تأثير الخاصية:

div {
  border-inline-style: solid;
  writing-mode: vertical-rl;
  border-inline-width: 5px;
}

جرب بنفسك

مثال 3: دمج خاصية direction

موقع الحدود عند بداية ونهاية الاتجاه الداخلي يتأثر direction تأثير الخاصية:

div {
  direction: rtl;
  border-inline-width: 5px 15px;
}

جرب بنفسك

نحوية CSS

border-inline-width: medium|thin|thick|length|initial|inherit;

قيمة الخاصية

القيمة	الوصف
medium	تحديد الحدود المتوسطة. القيمة الافتراضية.
thin	تحديد الحدود الصغيرة.
thick	تحديد الحدود الكبيرة.
length	يُمكّنك من تحديد سمك الحدود. انظر:وحدات CSS.
initial	ضع هذا الخصائص على قيمته الافتراضية. انظر: initial.
inherit	ينتقل هذا الخصائص من عنصر الأب. انظر: inherit.

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

القيمة الافتراضية:	medium
تنسيق الوراثة:	لا
صنع الرسوم المتحركة:	يدعم. انظر:خصائص الرسوم المتحركة.
الإصدار:	CSS3
جافا سكريبت نحوية:	object.style.borderInlineWidth="3px 10px"