خصوصیت column-rule-width

چاپ

مثال (خصوصیت column-rule-width)

مشخص کردن ضخامت بین دو ستون:

div
{
column-rule-width:10px;
-moz-column-rule-width:10px; /* Firefox */
-webkit-column-rule-width:10px; /* Safari and Chrome */
}
خودتان امتحان کنید »

در انتهای این بیاموز، مثال های بیشتری را خواهید دید.


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

Internet Explorer Firefox Opera Google Chrome Safari

مروگرهای Internet Explorer 10 و Opera خاصیت  column-rule-width را پشتیبانی می کنند.

مرورگر Firefox خاصیت جایگزین moz-column-rule-width- را پشتیبانی می کند.

مرورگرهای Safari و Chrome خاصیت جایگزین webkit-column-rule-width- را پشتیبانی می کنند.

توجه: مرورگر Internet Explorer 9 و نسخه های قبلی آن، خاصیت column-rule-width را پشتیبانی نمی کند.


تعریف و کاربرد

با استفاده از خاصیت column-rule-width می توانیم ضخامت خط بین ستون ها را مشخص کنیم.

مقدار پیشفرض medium
ارث بری خیر
نسخه CSS3
JavaScript ساختار object.style.columnRuleWidth="thin"

نحوه استفاده

column-rule-width: thin|medium|thick|length;
مقدارتوضیحاتنمایش دادن
thin خط بین دو ستون نازک می باشد. نمایش دادن »
medium خط بین دو ستون متوسط است. نمایش دادن »
thick خط بین دو ستون ضخیم است. نمایش دادن »
length طول بین خط دو ستون را مشخص می کند. نمایش دادن »

مثالs

مثال - خودتان امتحان کنید

Column-count

متن داخل عنصر div را به سه ستون تقسیم می کند.

Column-gap

متن داخل عنصر div را به سه ستون تقسیم می کند که فاصله بین هر ستون با دیگری 30 پیکسل است.

Column-rule

عرض، استایل و رنگ خطی که بین هر دو ستون قرار دارد را مشخص می کند.


بیاموزهای مرتبط

CSS3 Multiple Column (بیاموز CSS3)