column-rule-color

از ویژگی column-rule-color برای تعیین رنگ خطی که بین ستون های چیدمان چندستونی رسم شده، استفاده می شود.

این خط یا همان Rule تا حدودی شبیه به border است که بین ستون ها قرار می گیرد و حتی می توان استایل این خط را نیز شبیه به استایل های حاشیه یک عنصر تغییر داد.

این خط تنها بین ستون ها رسم می شود این یعنی قبل از اولین ستون و بعد از آخرین ستون رسم نخواهد شد.

این خط هیچ فضایی اشغال نمی کند، یعنی اندازه فاصله بین ستون ها (column-gap) را تحث تاثیر قرار نمی دهد و وسط آن فضا رسم می شود.

مقادیر ویژگی column-rule-color

column-rule-color: <color>

مقدار اولیه و پیشفرض این ویژگی currentColor می باشد.

<color>

می توان برای این ویژگی از هر نوع رنگی استفاده کرد:

.example {
    columns: 14em;
    column-rule-width: 5px;
    column-rule-style: solid;
    column-rule-color: #cbd8e7;
}

مقادیر معتبر برای این ویژگی:

column-rule-color: red;
column-rule-color: rgb(192, 56, 78);
column-rule-color: transparent;
column-rule-color: hsla(0, 100%, 50%, 0.6);

مثال

در دموی زیر این ویژگی را بررسی کنید:

See the Pen column-rule by Mojtaba Seyedi (@seyedi) on CodePen.

پشتیبانی مرورگر ها