ویژگی column-rule-color در CSS

column-rule-color Property

ویژگی column-rule-color در CSS رنگ خط مابین ستون های محتوا را مشخص می کند.

نحوه نوشتار

/* مقادیر رنگ */
column-rule-color: tomato;
column-rule-color: rgb(152, 11, 23);
column-rule-color: transparent;
column-rule-color: hsla(68%, 0, 23%, 0.8);

در مثال های زیر نحوه عملکرد این ویژگی را می بینیم:

html

<p class="pg1">
      لورم ایپسوم یا طرح‌نما (به انگلیسی: Lorem ipsum) به متنی آزمایشی و بی‌معنی
      در صنعت چاپ، صفحه‌آرایی و طراحی گرافیک گفته می‌شود. طراح گرافیک از این متن
      به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و ارایه اولیه شکل ظاهری و
      کلی طرح سفارش گرفته شده استفاده می نماید، تا از نظر گرافیکی نشانگر چگونگی
      نوع و اندازه فونت و ظاهر متن باشد.
</p>
<hr />
<p class="pg2">
      لورم ایپسوم یا طرح‌نما (به انگلیسی: Lorem ipsum) به متنی آزمایشی و بی‌معنی
      در صنعت چاپ، صفحه‌آرایی و طراحی گرافیک گفته می‌شود. طراح گرافیک از این متن
      به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و ارایه اولیه شکل ظاهری و
      کلی طرح سفارش گرفته شده استفاده می نماید، تا از نظر گرافیکی نشانگر چگونگی
      نوع و اندازه فونت و ظاهر متن باشد.
</p>
<hr />
<p class="pg3">
      لورم ایپسوم یا طرح‌نما (به انگلیسی: Lorem ipsum) به متنی آزمایشی و بی‌معنی
      در صنعت چاپ، صفحه‌آرایی و طراحی گرافیک گفته می‌شود. طراح گرافیک از این متن
      به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و ارایه اولیه شکل ظاهری و
      کلی طرح سفارش گرفته شده استفاده می نماید، تا از نظر گرافیکی نشانگر چگونگی
      نوع و اندازه فونت و ظاهر متن باشد.
</p>

css

p {
   padding: 15px;
   margin-top: 20px;
   text-align: justify;
}
.pg1 {
   column-count: 3;
   column-rule-style: solid;
   column-rule-color: orangered;
}
.pg2 {
   column-count: 3;
   column-rule-style: solid;
   column-rule-color: rgb(135, 206, 235);
}
.pg3 {
   column-count: 3;
   column-rule-style: solid;
   column-rule-color: #6b8e23;
}

مشاهده و ویرایش کد در حالت تمام صفحه

پشتیبانی مرورگرها
تمام مرورگرها از این ویژگی پشتیبانی می کنند.