خاصیت border در CSS

خاصیت Border در CSS

Wiki

خاصیت border-style

Wiki

خاصیت border-style مشخص می کند که چه نوع لبه ای نمایش داده شود.

نکته: هیچکدام از خواص مربوط به Border نمایش داده نمی شود مگر اینکه خاصیت border-style تنظیم شده باشد.

مقادیر خاصیت border-style:

none: هیچ لبه ای نمایش داده نمی شود

dotted: لبه ها به صورت نقطه نقطه ای نمایش داده می شود

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

solid: لبه ها به صورت خالص و یکپارچه نمایش داده می شود

double: دو لبه نمایش داده می شود

groove: یک لبه سه بعدی گود دار نمایش داده می شود

ridge: یک لبه سه بعدی برجسته نمایش داده می شود

inset: یک لبه سه بعدی inset نمایش داده می شود

outset: یک لبه سه بعدی outset نمایش داده می شود

خودتان امتحان کنید: تنظیم چگونگی نمایش لبه ها

خاصیت border-width

Wiki

این خاصیت برای تنظیم کردن عرض یا ضخامت لبه ها استفاده می شود.

مقدار border-width به پیکسل تنظیم می شود، البته با یکی از سه مقدار از پیش تعریف شده thin و medium یا thick نیز می تواند تنظیم شود.

نکته:اگر خاصیت border-style تنظیم نشده باشد خاصیت border-width کار نخواهد کرد.

 خاصیت border-color

Wiki

این خاصیت برای تنظیم رنگ لبه ها استفاده می شود. مقدار این خاصیت را می توان به یکی از روش های زیر تنظیم کرد:

• name: نام رنگ باید مشخص شود مانند "red"
• RGB: به صورت RGB مشخص می شود مانند "(rgb(255,0,0"
• Hex: به صورت هگزا دسیمال مشخص می شود مانند ff0000 #

این خاصیت همچنین با مقدار "transparent" نیز می تواند تنظیم شود.(لبه به رنگ Background خواهد بود)

نکته:اگر خاصیت border-style تنظیم نشده باشد خاصیت border-color کار نخواهد کرد.

 تنظیم لبه ها، به صورت جداگانه

Wiki

در CSS این امکان وجود دارد که برای اضلاع مختلف، لبه های مختلف تعریف کرد.

مثال بالا را می توان با یک خاصیت نیز تنظیم کرد:

خاصیت border-style از یک تا چهار مقدار می تواند داشته باشد:

1. border-style:dotted solid double dashed;
   • dotted لبه بالا
   • solid لبه راست
   • double لبه پایین
   • dashed لبه چپ
2. border-style:dotted solid double;
   • dotted لبه بالا
   • solid لبه راست و چپ
   • double لبه پایین
3. border-style:dotted solid;
   • dotted لبه بالا و پایین
   • solid لبه راست و چپ
4. border-style:dotted;
   • dotted تمام چهار لبه

آنچه در مورد خاصیت border-style در بالا گفته شد در مورد خاصیت های border-width و border-color نیز استفاده می شود.

مختصر نویسی خصوصیت border

Wiki

همان طور که در مثال بالا دیدید، برای تنظیم لبه ها با خواص زیادی سروکار داریم.

این امکان وجود دارد که تمام خواص بالا را به یک خاصیت تبدیل کنیم تا کدمان کوتاه تر شود، این خاصیت برای تنظیم لبه ها، خاصیت "border" نام دارد:

زمانی که از خاصیت border استفاده می کنید، توجه داشته باشید که ترتیب مقادیر به صورت زیر خواهد بود:

1. border-width
2. border-style
3. border-color

اگر یکی از مقادیر بالا قید نشود مشکلی پیش نخواهد آمد البته همان طور که قبلاً گفته شد خاصیت border-style مورد نیاز است، تنها چیزی که باید رعایت شود ترتیب مقادیر است.

تمام خواص مربوط به لبه در CSS

Wiki