خصوصیت column-rule-style

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

مشخص کردن استایل خط بین ستون ها:

div
{
column-rule-style:dotted;
-moz-column-rule-style:dotted; /* Firefox */
-webkit-column-rule-style:dotted; /* Safari and Chrome */
}

خودتان امتحان کنید »

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

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

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

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

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

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

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

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

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

نحوه استفاده

مقدار	توضیحات	نمایش دادن
none	هیچ قانونی برای خط بین دو ستون تعریف نشده است.	نمایش دادن »
hidden	یک قانون مخفی تعریف می کند.	نمایش دادن »
dotted	خط بین دو ستون به صورت نقطه چین نمایش داده می شود.	نمایش دادن »
dashed	خط بین دو ستون به صورت خط چین نمایش داده می شود.	نمایش دادن »
solid	خط بین دو ستون به صورت یکپارچه نمایش داده می شود.	نمایش دادن »
double	خط بین دو ستون به صورت دو خطه نمایش داده می شود.	نمایش دادن »
groove	خط بین دو ستون به صورت سه بعدی گود دار (groove) نمایش داده می شود. افکت بستگی به مقدار خصوصیت color و width دارد.	نمایش دادن »
ridge	خط بین دو ستون به صورت سه بعدی برجسته (ridge) نمایش داده می شود. افکت بستگی به مقدار خصوصیت color و width دارد.	نمایش دادن »
inset	خط بین دو ستون به صورت سه بعدی inset نمایش داده می شود. افکت بستگی به مقدار خصوصیت color و width دارد.	نمایش دادن »
outset	خط بین دو ستون به صورت سه بعدی outset نمایش داده می شود. افکت بستگی به مقدار خصوصیت color و width دارد.	نمایش دادن »

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

Column-count

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

Column-gap

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

Column-rule

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

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

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

: نوشته شده توسط امیر پهلوان صادق; بازدید: 6181

برای درج دیدگاه، ابتدا باید وارد بیاموز شوید.

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.

مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی