حاشیه در css به ما این امکان را می دهد که برای المان خود border رسم کنیم و نوع، ضخامت و رنگ آن را تعیین کنیم. به شکل زیر توجه کنید:
Border Style
با مقدار دهی به Border Style مشخص می کنیم که کدام نوع از حاشیه را اعمال کنیم.
انواع Border Style
-
dotted
مشخص کننده نوعی حاشیه نقطه چین است
-
dashed
نوعی حاشیه تشکیل شده ازخط های تیره است
-
solid
این نوع حاشیه با خط پیوسته معمولی است
-
double
این حاشیه دو خط موازی است
-
groove
نوعی حاشیه سه بعدی است که تآثیر آن، به رنگ حاشیه نیز بستگی دارد
-
ridge
نوعی حاشیه سه بعدی است که تآثیر آن، به رنگ حاشیه نیز بستگی دارد
-
inset
نوعی حاشیه سه بعدی است که تآثیر آن، به رنگ حاشیه نیز بستگی دارد
-
outset
نوعی حاشیه سه بعدی است که تآثیر آن، به رنگ حاشیه نیز بستگی دارد
-
none
بدون هیچ حاشیه ای
-
hidden
با حاشیه پنهان
border-style
می تواند چهار مقدار بگیرد که این مقادیر به ترتیب این ها هستند: حاشیه بالا، حاشیه سمت راست، حاشیه پایین و حاشیه سمت چپ.
p.dotted {border-style: dotted;} p.dashed {border-style: dashed;} p.solid {border-style: solid;} p.double {border-style: double;} p.groove {border-style: groove;} p.ridge {border-style: ridge;} p.inset {border-style: inset;} p.outset {border-style: outset;} p.none {border-style: none;} p.hidden {border-style: hidden;} p.mix {border-style: dotted dashed solid double;}
نتیجه این کد را در شکل زیر می بینید:
Border Width
این ویژگی در واقع ضخامت حاشیه در css را تعیین می کند که می توان مستقیما به آن مقداردهی کرد یا از مقادیر از پیش تعیین شده نظیر thin
، medium
و thick
استفاده کرد.
می توان چهار عدد به border-width
اختصاص داد که به ترتیب به ضخامت سمت بالا، راست، پایین و چپ اختصاص می یابند. به مثال زیر دقت کنید:
p { border-style: solid; border-width: 2px 10px 6px 30px; }
Border Color
برای تعیین رنگ حاشیه در css از یکی از روش های زیر می توان استفاده کرد:
- استفاده از نام رنگ مانند: قرمز
- استفاده از روش HEX مانند: ff0000 #
- استفاده از روش RGB مانند: (rgb(255,0,0
- transparent
می توان به border-color چهار مقدار داد که به ترتیب برای حاشیه بالا، سمت راست، پایین و سمت چپ اعمال می شود.
اگر border-color مشخص نشود، رنگ حاشیه در css توسط خصوصیت color المان، تعیین می شود.
p { border-style: solid; border-color: red green blue yellow; }
حالت های مختلف border-style
اگر چهار مقدار به آن اختصاص داده شود:
border-style: dotted solid double dashed;
حاشیه بالا: dotted
حاشیه راست: solid
حاشیه پایین: double
حاشیه چپ: dashed
اگر سه مقدار به آن اختصاص داده شود:
border-style: dotted solid double;
حاشیه بالا: dotted
حاشیه راست: solid
حاشیه پایین: double
اگر دو مقدار به آن اختصاص داده شود:
border-style: dotted solid;
حاشیه بالا و پایین: dotted
حاشیه راست و چپ: solid
اگر یک مقدار به آن اختصاص داده شود:
border-style: dotted;
کل حاشیه: dotted
* نکته: خصوصیت های border-radius
، border-color
، border-width
اگر به تنهایی استفاده شوند، کار نمی کنند؛ لازم است حتما border-style
نیز تعیین شود.
مختصر نویسی حاشیه در css
همان طور که توضیح داده شد، روش های متفاوتی برای اختصاص حاشیه در css وجود دارد. برای مختصر شدن کد، می توان تمام خصوصیت ها را در یک خط کد نوشت.
خصوصیت border مختصر شده خصوصیات زیر است:
- border-width
- border-style (الزامی می باشد)
- border-color
به مثال زیر دقت کنید:
p { border: 5px solid red; }
همچنین می توانید برای تک تک اضلاع border، مقدار تعیین کنید:
p { border-left: 6px solid red; background-color: lightgrey; }
Rounded Borders
هنگامی که بخواهیم گوشه ها گرد باشد، از این خصوصیت استفاده می کنیم:
p { border: 2px solid red; border-radius: 5px; }
* نکته: خصوصیت border-radius
در IE8 و نسخه های قبل از آن پشتیبانی نمی شود.
برگرفته از وب سایت w3schools
دیدگاه بگذارید