خصائص عرض الحدود-block CSS

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

border-block-width عرض عرض العنصر المعدل للخصائص في اتجاه الكتلة

ملاحظة:لجعل border-block-width يجب تعيين الخاصية لتطبيقها border-block-style.

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

إذا كان border-block-width الخصائص لديها قيمتان:

border-block-width: 10px 50px;

• عرض الحدود عند بداية البلك هو 10px
• عرض الحدود عند نهاية البلك هو 50px

إذا كان border-block-width الخصائص لديها قيمة واحدة:

border-block-width: 10px;

• عرض الحدود عند بداية ونهاية البلك هو 10px

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

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

مثال

مثال 1

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

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

جرب بنفسك

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

تبدأ الحدود في اتجاه البлок والنهاية writing-mode تأثير الخاصية:

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

جرب بنفسك

جافا سكربت:

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

قيمة الخاصية

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

دعم المتصفح

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

الصفحات ذات الصلة

الدروس:حافة CSS

المرجع:خصائص الحدود CSS

المرجع:خصائص الحدود-block CSS

المرجع:خصائص عرض الحدود-block-الجزء السفلي CSS

المرجع:خصائص عرض الحدود-block-الجزء العلوي CSS

المرجع:خصائص نمط الحدود-block CSS

المرجع:خصائص عرض الحدود-الجزء السفلي CSS

المرجع:خصائص عرض الحدود اليسرى

المرجع:خصائص عرض الحدود اليمنى

المرجع:خصائص عرض الحدود العلوية

المرجع:خصائص writing-mode CSS