استخدام خاصية column-rule-color في CSS3 ومراجعة الأمثلة

يحدد خاصية column-rule-color لون جميع الخطوط المرسومة بين الأعمدة في تصميم الأعمدة المتعددة.

في الجدول أدناه، يتم توضيح استخدام هذه الخاصية وتاريخ إصداراتها، بالإضافة إلى جملة استخدامها في سكربتات JavaScript.

استخدام جملة لون خط الفاصلة بين الأعمدة

نحو استخدام جملة هذه الخاصية:

column-rule-color: color | initial | inherit

في هذا المثال، يتم عرض كيفية استخدام خاصية column-rule-color.

p {
　　　　/*Chrome, Safari, Opera*/
　　　　-webkit-column-count:　3;
　　　　-webkit-column-gap:　100px;
　　　　-webkit-column-rule-color:　red;
　　　　-webkit-column-rule-width:　2px;
　　　　-webkit-column-rule-style:　solid;
　　　　/*　Firefox　*/
　　　　-moz-column-count:　3;
　　　　-moz-column-gap:　100px;
　　　　-moz-column-rule-color:　red;
　　　　-moz-column-rule-width:　2px;
　　　　-moz-column-rule-style:　solid;
　　　　
　　　　column-count:　3;
　　　　column-gap:　100px;
　　　　column-rule-color:　red;
　　　　column-rule-width:　2px;
　　　　column-rule-style:　solid;
}

قيمة الخاصية

جدول التالي يصف قيم هذه الخاصية.

توافق المتصفحات

توافق المتصفحات الخاصة بخصائص column-rule-color، الأرقام في الجدول التالي تعبر عن إصدار المتصفح الأدنى الذي يدعم هذه الخاصية؛ جميع المتصفحات الشائعة تدعم هذه الخاصية.

قراءة إضافية

يرجى الرجوع إلى التعليمات التالية:تصميم العمود المتعدد في CSS3.

خصائص ذات صلة:عرض العمود,ملء العمود,فرق العمود,خط القسم,عرض خط القسم,نمط خط القسم,توسيع العمود,عدد العمود,العمود.