cssblog.ir logo
P

border

خط حاشیه (border) دور عناصر

مشخصه border میزان ضخامت، رنگ و نوع خط حاشیه عناصر را تعیین می‌کند. همچنین خط حاشیه پیشفرض عناصر را می توان از طریق این مشخصه نقض نمود

از نظر من خطوط حاشیه (یا همان border) یکی از مشخصه های بسیار دوست داشتنی، کارآمد و بی دردسر هستند. برای کسانی که اصلا با این مشخصه آشنایی ندارند توضیح دهم که با استفاده از این مشخصه می توان در دور عناصر خط حاشیه ایجاد کرد. مانند شکل زیر:

صفات border ها

border ها از ۳ صفت تشکیل شده اند. یکی عرض (ضخامت)، استایل و دیگری رنگ آنهاست. برای اینکه به یک عنصر border بدهیم به ترتیب مقدار هریک از این صفات بیان شده را می نویسیم. مثلا:

div {
	border: 4px solid blue;
}

همانطور که می بینید ضخامت برابر با ۴ و استایل برابر با solid و رنگ برابر با آبی نوشته است. 

همچنین می توان هر مشخصه border را بجای حالت  shorthand با ۳ مشخصه CSS نوشت. یعنی همان مثال بالا را می توان به این شکل نیز نوشت:

div {
	border-width: 4px;
	border-style: solid;
	border-color: blue;
}

البته انجام چنین کاری بدلیل افزایش مقدار و حجم CSS ها مگر در شرایط خاص توصیه نمی شود. 

در مورد ضخامت که فکر نمی کنم نکته ای برای بیان باقی باشد و کاملا واضح است که چه کاری را انجام می دهد. اما در مورد استایل ما می توانیم مقادیر لیست زیر را نیز وارد کنیم:

مقدار نوع خط حاشیه
solid تک رنگ و ساده
dashed خط چین
dotted نقطه چین
double دوخطی
groove شیار (کانال)
inset قرار گرفتن در درون
outset قرار گرفتن در بیرون
ridge لبه

در مثال زیر می توانید هرکدام از مقادیر مختلف را از داخل لیست انتخاب کنید و نتیجه را مشاهده نمائید.  

border های غیر کامل

اگر به مثال های بالا دقت کنید می بینید که در تمام مثال ها border ها بصورت کامل و در ۴ سمت عنصر ظاهر شده اند. اما اگر حالتی باشد که عنصر فقط در یک تا سه سمت border داشته باشد، چطور ؟ در چنین مواقعی نحوه عملکرد معمولا به شرح زیر است. 

border فقط یک سمت

اگر بخواهیم فقط در یک جهت border داشته باشیم می توانیم پس از نوشتن border- نام آن جهت را نوشته و دقیقا با همان syntax که به border مقدار می دادیم، به این مشخصه مقدار دهیم. مانند:

div {
	border-right: 3px solid yellow;
}

border در دو یا سه سمت

برای درک بهتر فرض کنید که می خواهیم برای دو سمت بالا و پایین border تعیین کنیم. برای انجام چنین کاری دو رویکرد مختلف را می توان انجام داد.

اول: تعیین حاشیه بصورت جداگانه

div {
	border-top: 3px solid yellow;
	border-left: 3px solid yellow;
}

دوم: تعیین حاشیه کامل برای تمام سمت ها و سپس نقض آن برای جهت هایی که نمی خواهیم border داشته باشند. 

div {
	border: 3px solid yellow;
	border-right: none;
	border-bottom: none;
}

دیدگاه کاربران

تاکنون <% totalComments %> دیدگاه برای این مطلب ثبت شده است.

تاکنون دیدگاهی ثبت نشده است. شما می توانید اولین شخصی باشید که دیدگاه خود را ارسال می کند

<% errorMessage %>

<% comment.name %>

avatar
<% comment.comment_replies.length %> پاسخ برای این دیدگاه ثبت شده است

<% reply.name %>

avatar

ارسال دیدگاه جدید

برای ارسال دیدگاه یا پرسش جدید از طریق فرم زیر اقدام کنید.

ارائه پاسخ به دیدگاه

شما در حال پاسخ دادن به دیدگاه «<% replyComment.name %>» هستید. انصراف از پاسخ

  • <% s %>
  • <% e %>

نکاتی درباره دیدگاه ها

  1. برای حذف کپچا (عبارت امنیتی) وارد اکانت خود شوید
  2. شما می توانید از markdown داخل کامنت خود استفاده کنید (اطلاعات بیشتر)
  3. دیدگاه ها قبل از نمایش نیازمند تائید می باشند