سبد خرید (0)

تبلیغات

خاصیت outline در CSS

خاصیت Outline در CSS

Wiki

ویژگی outline خطی است که اطراف لبه های یک عنصر کشیده می شود، توجه داشته باشید که با ویژگی border فرق دارد.

 همچنین عرض outline جزو ابعاد عنصر محسوب نمی شود.

به این خصوصیت می توان style، رنگ و عرض اختصاص داد.


مثال - خودتان امتحان کنید

Wiki

کشیدن خط اطراف یک عنصر (outline)
این مثال نشان می دهد که چگونه می توان یک خط اطراف عنصر p کشید، به عبارتی چگونه فضای بیرون از لبه های یک عنصر را تنظیم کنیم.

تنظیم Style خصوصیت outline
این مثال نشان می دهد که چگونه style یک outline را تنظیم کرد.

تنظیم رنگ خصوصیت outline
این مثال نشان می دهد که چگونه رنگ یک outline را تنظیم کرد.

تنظیم عرض خصوصیت outline
این مثال نشان می دهد که چگونه عرض یک outline را تنظیم کرد.


کلیه خصوصیات مربوط به outline

Wiki

شماره ای که در ستون css ذکر شده، نشان می دهد که خصوصیت مورد نظر در کدام نسخه CSS تعریف شده است.

خصوصیتتوضیحاتمقادیرCSS
outline

کلیه خصوصیات outline را در یک مرحله تنظیم می کند

outline-color
outline-style
outline-width
inherit
2
outline-color رنگ یک outline را تنظیم می کند color_name
hex_number
rgb_number
invert
inherit
2
outline-style style یک outline را تنظیم می کند none
dotted
dashed
solid
double
groove
ridge
inset
outset
inherit
2
outline-width عرض یک outline را تنظیم می کند thin
medium
thick
length
inherit
2

دیدگاه‌ها  

+3 # میلاد نظری 1393-11-23 10:25
این دستور دقیقا چه کاربردی داره؟ منظورم خصوصیت outline است.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+5 # امیر پهلوان صادق 1393-11-23 10:33
با توجه به تصویر بالا، ویژگی outline بلافاصله بعد از Border قرار دارد و می توان برای آن یک رنگ دلخواه را تنظیم نمود.
اگر به لینک زیر برید، و به کادر سبز رنگی که در اطراف اسکریبت ها کشیده شده است توجه کنید، متوجه خواهید شد که برای رنگی کردن فضای اطراف border، از خصوصیت Outline استفاده شده است:
http://beyamooz.com/php/80-basic/64
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # mostafa 1394-02-03 22:58
ميشه اين رو گفت كه فضايي رو كه ما به margin اختصاص ميديم توسط Outline رنگي ميشه؟ اگر نه آيا اين دوتا روي هم ديگه اثر نميذارن؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # امیر پهلوان صادق 1394-02-04 09:55
با توجه به مثال زیر، اگر اندازه outline را بیشتر بکنیم از فضای margin به آن اختصاص داده خواهد شد. و یا حتی اگر margin را صفر کرده و outline را افزایش دهیم، باز محلی برای فضای ouline باز نخواهد شد و روی هم افتادگی با عنصر کناری اتفاق خواهد افتاد: p.code {
border: 6px solid #D4D4D4;
padding: 10px;
margin: 4px;
outline: 5px solid #DDE9BE;
}

این اتفاق بخاطر این است که عرض outline جزو ابعاد عنصر محسوب نمی شود.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # giryaii 1393-09-22 00:21
سلام من از تمام نسخه های ‏HTML‏ در سایتم استفاده میکنم حالا باید ‏DOCYTYPE‏ را چی بنویسم؟آیا راحی هست که خودم بفهم؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # امیر پهلوان صادق 1393-09-22 09:54
سلام، باید توجه داشته باشید که، وقتی با استفاده از ‏DOCYTYPE‏ اعلام می کنید که از HTML5 استفاده می کنید، یعنی به مرورگر می گویید، علاوه بر پردازش های معمولی که برای دیگر نسخه های HTML قائل است، امکانات جدیدی که در HTML5 معرفی شده است را نیز در نظر بگیرد.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن

آموزش صوتی CSS

بستن
مدرس:
سوال و جواب:

ابزاری که در پیش روی دارید یکی از ابزارهای بسیار کاربردی سایت بیاموز در زمینه آموزش است، این ابزار برای سهولت یادگیری شما کاربران محترم طراحی شده است.

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!