ویژگی outline در CSS

outline Property

ویژگی کوتاه نویسی outline در CSS مقادیر ویژگی های زیر مجموعه اش را مشخص می کند، که عبارتند از: outline-style, outline-width و outline-color . این ویژگی خطی را به دور عنصر رسم می کند و این خط بعد از border و خارج از محدوده عنصر می باشد.

نحوه نوشتار

outline: solid;

/* استایل | رنگ */
outline: #f66 dashed;

/* ضخامت | استایل */
outline: inset thick;

/* ضخامت | استایل | رنگ */
outline: green solid 3px;

outline: outline-color | outline-style | outline-width;

border و outline

outline خطیست که به دور عنصر و بعد از border کشیده می شود. بر خلاف outline , border بیرون از قاب عنصر رسم می شود و ممکن است بر روی عناصر دیگری از صفحه قرار گیرد. در حالی که border در آخرین محدوده عنصر قرار گرفته و تمایز آن را با دیگر عناصر و محتوای صفحه نمایان می سازد.

ویژگی outline ممکن است یک، دو و یا سه مقدار را بپذیرد و ترتیب این مقادیر نیز مهم نیستند.

نکته: اگر استایل outline تعریف نشود در بسیاری از عناصر نامرئی خواهد بود. چرا که این ویژگی در حالت پیشفرض none است و به همین علت مرورگر آن را نمایش نخواهد داد. برای جلوگیری از این نکته باید هنگام استفاده از این ویژگی، استایل آن را مشخص کنیم.

مقادیر

outline-color​

رنگ outline را مشخص می کند.

outline-style​

نوع استایل outline را مشخص می کند.

outline-width​

ضخامت outline را مشخص می کند.

در مثال زیر نحوه عملکرد این ویژگی را میبینیم:

html

<div class="style1">
   border: red و outline: blue;
</div>
<div class="style2">
   border: red و outline: blue;
</div>

css

div {
   margin: 25px;
   padding: 15px 0;
   text-align: center;
}
.style1 {
   border: 7px solid red;
   outline: 7px dashed blue;
}
.style2 {
   background-color: pink;
   border: 7px dashed red;
   outline: 7px double blue;
}

مشاهده و ویرایش کد در حالت تمام صفحه

پشتیبانی مرورگرها
تمام مرورگرها از این ویژگی در CSS پشتیبانی می کنند.