021-28423015

outline در CSS

صفت outline در CSS استايل ،‌رنگ و عرض خط خارج از عنصر را مشخص مي كند.
outline يك خط رسم شده به دور عنصر است (بيرون از border) تا عنصر برجسته شود.
چون خط خارجي از border جداست و از عنصر حساب نمي شود ،‌ بر روس عرض و ارتفاع كل عنصر تاثير نخواهد داشت.
 

استايل دهي به outline

صفت outline-style استايل خط خارجي را مشخص مي كند. اين صفت مي تواند يكي از مقادير زير را داشته باشد :

dotted - نقطه اي
dashed - خط بريده
solid - خط ممتد تكي
double - خط ممتد دوبل
groove - خط سه بعدي شياردار - نتيجه بستگي به مقدار رنگ دارد
ridge - خط سه بعدي لبه دار - نتيجه بستگي به مقدار رنگ دارد
inset - خط سه بعدي فروورفته -  نتيجه بستگي به مقدار رنگ دارد
outset - خط سه بعدي برآمده -  نتيجه بستگي به مقدار رنگ دارد
none - بدون خط حاشيه
hidden - خط حاشيه مخفي


در مثال زير ابتدا يك خط حاشيه نازك به همه عناصر p اضافه شده است ،‌سپس مقادير مختلف براي  outline-style نمايش داده شده است.

مثال :

دور خط
p {
    border: 1px solid black;
    outline-color: red;
}

p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}
مشاهده مثال


نكته !‌ تا زماني كه صفت outline-style تنظيم نشده باشد ، هيچكدام از صفت هاي ديگري كه در زير اشاره خواهد شد ،‌تاثير نخواهند داشت.

 

رنگ outline

براي تنظيم رنگ خط خارجي از صفت outline-color استفاده مي كنيم.
اين رنگ مي تواند با مقادير زير تنظيم شود :

- نام رنگ
- مقدار RGB
- مقدار Hex
- invert : از مكانيزم برعكس كردن رنگ استفاده مي كند تا خط خارجي قابل مشاهده باشد. (صرف نظر از رنگ پس زمينه)

مثال :

رنگ دورخط
p {
    border: 1px solid black;
    outline-style: double;
    outline-color: red;
}
مشاهده مثال

 

ضخامت outline

براي تعيين ضخامت خط خارجي از صفت outline-width استفاده مي كنيم. ضخامت خط خارجي را مي توان با يك اندازه مشخص ( px , pt , cm , em و ...) تعيين كرد يا از 3 مقدار از قبل تعيين شده thin ،‌ medium يا thick استفاده كرد.

مثال :

ضخامت دورخط
p {border: 1px solid black;}

p.one {
    outline-style: double;
    outline-color: red;
    outline-width: thick;
}

p.two {
    outline-style: double;
    outline-color: green;
    outline-width: 3px;
}
مشاهده مثال



 

خلاصه نويسي outline

امكان خلاصه نويسي براي اين صفت هم وجود دارد. براي اينكار با استفاده از صفت outline‌ مي توان يك در يك خط كد ،‌3 صفت زير را نيز تنظيم كرد :

outline-width
outline-style
outline-color

مثال :

خلاصه نویسی کد outline
p {
    border: 1px solid black;
    outline: 5px dotted red;
}
مشاهده مثال

 

 

نظر شما

لطفا نام و نام خانوادگی خود را وارد کنید
لطفا ایمیل خود را وارد کنید لطفا ایمیل صحیح وارد کنید.
لطفا متن نظر خود را وارد کنید
>

یادگیری CSS

مقالات و دروس

عضویت در خبرنامه شرکت نرم افزاری وب مهراز

برای اطلاع از بسته ها ، تخفیف های استثنایی و تازه های ما به خبرنامه وب مهراز بپیوندید.

لطفا شماره همراه صحیح وارد کنید.
لطفا ایمیل صحیح وارد کنید.

مقالات مرتبط