cssblog.ir logo
P

outline

خط حاشیه بدون تاثیرگذاری روی موقعیت و اندازه ها

مشخصه outline همانند مشخصه border عمل می‌کند اما چند تفاوت مهم و اساسی با آن دارد

این مشخصه شباهت زیادی به مشخصه border دارد و کاربرد آن این است که دور عنصر خط حاشیه رسم می‌کند اما این مشخصه ۳ تفاوت اصلی با borderدارد:

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

۲- این مشخصه بر خلافborder تاثیری روی محاسبه مدل جعبه (box model) نخواهد داشت. در نتیجه تاثیری در موقعیت‌دهی عنصر ندارد که در برخی از مواقع، این خود ویژگی بسیار مهم و کارآمدی می تواند باشد.

۳- این مشخصه از مشخصه border-radius تاثیر نمی پذیرد‌ (که طبیعی است چون اصلا border نیست)

نحوه استفاده

همانندborder این مشخصه یک مشخصه shorthand است که از زیر مشخه های outline-widthو outline-styleو outline-colorتشکیل شده است. این ۳ زیر مشخصه در شکل یک مشخصه outline می توانند به این شکل استفاده شوند:

div {
	outline-style: dotted;
	outline-color: red;
	outline-width: 2px;
}

که کاملا معادل است با:

div {
	outline: 2px dotted red;
}

کاربرد outline

کاربرد اصلی این مشخصه در مواقعی است که می خواهیم با استفاده از خط حاشیه روی یک عنصر تمایز ایجاد کنیم (مثلا هنگامی با استفاده از کلید تب روی آن focus می شود) اما می خواهیم مطمئن شویم که اینکار تاثیری رو موقعیت دهی های آن نخواهد داشت و همچین باعث پرش جزئی که معمولا هنگام اضافه شدن border به عنصر بدون border رخ می دهند، نخواهد شد.

برای مثال با کلیک (فوکوس) روی این فیلدهای ورودی مشاهده می کنید که بدلیل استفاده از outline تغییری در موقعیت آنها ایجاد نمی شود:

 

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

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

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

<% errorMessage %>

<% comment.name %>

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

<% reply.name %>

avatar

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

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

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

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

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

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

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