خصوصیت outline-style
مثال (خصوصیت outline-style)
تنظیم کردن استایل یک outline:
p
{
outline-style:dotted;
}
خودتان امتحان کنید »
{
outline-style:dotted;
}
در انتهای این آموزش، مثال های بیشتری را خواهید دید.
تعریف و کاربرد
با استفاده از خصوصیت outline می توان یک خط خارجی اطراف عناصر رسم نمود، (خارج از border) تا عنصر را برجسته تر و واضح نمود.
با استفاده از خصوصیت outline-style می توان استایل outline را مشخص نمود.
| مقدار پیشفرض | none |
|---|---|
| ارث بری | خیر |
| نسخه | CSS2 |
| JavaScript ساختار | object.style.outlineStyle="dotted" |
پشتیبانی مرورگرها
تمام مرورگرهای اصلی، خصوصیت outline را پشتیبانی می کنند.
توجه: IE8 به !DOCTYPE! نیاز دارد.
نکته ها و ترفندها
outline خطی است که پیرامون عنصر قرار دارد. این خط در اطراف margin قرار دارد. با این وجود این خط با border تفاوت دارد.
outline جزء ابعاد عنصر به حساب نمی آید، بنابراین خصوصیت های طول و عرض عنصر شامل ضخامت outline نمی شود.
مقدارهای خصوصیت
| مقدار | توضیحات | نمایش دادن |
|---|---|---|
| none | هیچ outline ی وجود ندارد. | نمایش دادن » |
| hidden | یک outline مخفی را مشخص می کند. | نمایش دادن » |
| dotted | یک outline نقطه چین را مشخص می کند. | نمایش دادن » |
| dashed | یک outline خط چین را مشخص می کند. | نمایش دادن » |
| solid | outline ثابت نمایش داده می شود. | نمایش دادن » |
| double | outline به صورت دو لبه نمایش داده می شود | نمایش دادن » |
| groove | outline سه بعدی گود دار نمایش داده می شود. اثر آن به outline-color بستگی دارد | نمایش دادن » |
| ridge | outline سهسه بعدی برجسته نمایش داده می شود. اثر آن به outline-color بستگی دارد | نمایش دادن » |
| inset | outline سه بعدی inset نمایش داده می شود. اثر آن به outline-color بستگی دارد | نمایش دادن » |
| outset | outline سه بعدی outset نمایش داده می شود. اثر آن به outline-color بستگی دارد | نمایش دادن » |
| inherit | تعیین می کند که باید از والدش، ارث بری داشته باشد. |
مثال - خودتان امتحان کنید
این مثال مشخص می کند که چگونه به یک outline استایل بدهیم.
بیاموزهای مرتبط
outline (بیاموز CSS)
CSS Outline (مرجع خصوصیت های CSS)
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 9252
