تبلیغات متنی و بنر

آموزش CSS 3 > رابط کاربری در CSS 3 > خاصیت outline-offset

خاصیت outline-offset :

خاصیت outline-offset یک خط حاشبه را برای عنصر تعیین کرده و آن را به دور عنصر ایجاد می کند .

outline-offset و border دو تفاوت اصلی دارند :
  • outline بر خلاف border ها ، فضا اشغال نمی کنند .
  • outline برخلاف border ، می توانند اشکال غیر چهار ضلعی داشته باشند .

شکل کلی استفاده از این خاصیت به صورت زیر است :

Syntax outline-offset : length | inherit :

مثال : outline-offset : 10px ;

syntax توضیح هر یک از موارد
توضیح پارامتر
به وسیله پارامتر length می توانید میزان فاصله outline از حاشیه عنصر را تعیین نمایید :
  1. مقدار دهی بر حسب اندازه : در این حالت باید مقدار پارامتر را بر حسب واحدی مثال px یا em تعیین کنید . مثلا  10px.

استفاده از این پارامتر اجباری است .

 length
به  معنای این است که مقدار آن از عنصر مادر parent به ارث می رود . inherit

پشتیانی در مرورگر های مختلف :

اکثر مرورگر های مطرح به جز نابغه معروف به صورت عادی از این خاصیت پشتیانی می کنند .

کد لازم برای پشتیانی نوع مرورگر
پشتیانی عادی .
پشتیانی عادی .
پشتیانی نمی شود .
پشتیانی عادی .

مثال عملی :

برای یک عنصر outline  تعیین
<!DOCTYPE html>
<html>
   <head>
        <style>
               div
                       {
                            margin:20px;
                            width:150px;
                           padding:10px;
                           height:70px;
                          border:2px solid black;
                          outline:2px solid red;
                          outline-offset:15px;
                         }
        </style>
    </head>
<body>
        <div>This div has an outline border 15px outside the border edge.</div>
</body>
</html> 		کد
This div has an outline border 15px outside the border edge.
 خروجی

راجع این مطلب سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...         >>>>>  ورود به انجمن تخصصی

نظر خودتان درباره این صفحه را با ما در میان بگذارید :

آیا مطالب این صفحه برای شما مناسب و مفید بوده است :

نام :               
آدرس Email :  

نظر شما :  

سوال امنیتی : پایتخت ایران ؟