خصائص نمط الحدود العمودية CSS

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

border-block-style يحدد الخاصية نمط الحدود للعنصر في الاتجاه الصندي

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

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

border-block-style: dashed dotted;

• نمط الحدود عند بداية الصندوق هو خط رفيع
• نمط الحدود عند نهاية الصندوق هو خط نقطي

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

border-block-style: dashed;

• نمط الحدود عند بداية و نهاية الصندوق هو خط رفيع

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

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

مثال

مثال 1

تعيين نمط الحواف في اتجاه الحلقة:

#example1 {
  border-block-style: solid;
}
#example2 {
  border-block-style: dashed dotted;
}

جرب بنفسك

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

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

div {
  writing-mode: vertical-rl;
  border-block-style: dotted;
}

جرب بنفسك

جملة CSS

border-block-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;

قيمة الخاصية

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

دعم المتصفح

الرقم في الجدول يمثل إصدار المتصفح الذي يدعم الخاصية لأول مرة.

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

دليل التعليمات:عنوان CSS

参考：خصائص الحدود CSS

参考：خصائص الحدود العمودية CSS

参考：خصائص نمط الحدود العمودية السفلية CSS

参考：خصائص نمط الحدود العمودية العلوية CSS

参考：خصائص نمط الحدود السفلية CSS

参考：خصائص نمط الحدود اليسرى للCSS

参考：خصائص نمط الحدود اليمنى للCSS

参考：خصائص نمط الحدود العلوية للCSS

参考：خصائص writing-mode CSS