آموزش برنامه نویسی ، پایگاه داده sql server
آموزشگاه برنامه نویسی تحلیل داده : دوره های آموزشی برنامه نویسی و طراحی وب ASP.Net , C# , HTML , CSS , SQL Server


آموزشگاه برنامه نویسی مجتمع فنی تهران میرداماد : دوره های آموزشی برنامه نویسی و طراحی وب ASP.Net , C# , HTML , CSS , SQL Server

خطوط حاشیه در CSS 3 - خاصیت border-image

خاصیت border-image در خطوط حاشیه :

به وسیله این خاصیت می توان یک عکس را به عنوان خطوط حاشیه برای یک عنصر به کار برد . شکل کلی استفاده از این خاصیت به شرح زیر است :

Syntax border-image : source   width   outset   repeat ;
مثال : border-image : url(../Pic/border_image.png) 30 30 round ;

این خاصیت یک خاصیت چند مقداری بوده و حالت کوتاه و خلاصه شده چندین خاصیت border-image-source, border-image-width, border-image-outset و border-image-repeat است . برای تعیین خواص فوق دو راه وجود دارد :

  1. تعیین مقدار کلیه خواص در خاصیت چند مقداری border-image .
  2. تعیین هر کدام از خواص به صورت جداگانه .

راه اول راهی بهتر و متداول است . زیرا حجم کدنویسی را کاهش داده و نظم بهتری به کد نویسی می دهد .
در روش اول در واقع باید مقدار هر کدام از خاصیت های border را به ترتیب قرار داد . در جداول زیر به توضیح هر یک موارد بالا می پردازیم و سپس با ارایه چند مثال آنها را در عمل به شما نمایش می دهیم :

syntax توضیح هر یک از موارد
توضیح معادل کوتاه نشده خاصیت کوتاه syntax شده در
این خاصیت آدرس عکسی که قرار است به عنوان خط حاشیه مورد استفاده قرار بگیرد را تعیین می کند .
اگر مقدار آن برابر با none قرار داده شود ، هیچ عکسی به عنوان خطوط حاشیه به کار برده نمی شود .
border-image-source source
این خاصیت عرض خطوط نمایش را تعیین می کند .
مقدار پیش فرض خاصیت width برایر صفر است و می تواند به یکی از 3 حالت زیر مقدار دهی شود :
  1. مقدار عددی بر حسب pixel یا pt مثلا px 10 .
  2. مقدار بر حسب درصد مثلا % 10 .
  3. قردادن مقدار برابر با auto . که باعث می شود مقدار خود را از عنصر مادر به ارث ببرد .
border-image-width width
این خاصیت میزان فاصله محتویات درون عنصر با خطوط حاشیه را تعیین می کند . border-image-outset outset
این خاصیت تعیین می کند که اگر عکس مورد نظر برای خطوط حاشیه کوچکتر از مقدار لازم بود ، آیا برای پوشش کل ناحیه خطوط حاشیه ، تکرار ( repeat ) یا بزرگنمایی ( stretch ) شود . این خاصیت می تواند با یکی از 3 حالت زیر مقدار دهی شود :
  1. stretch : این مقدار باعث می شود تا عکس برای پوشاندن کل ناحیه خطوط نمایش ، بزرگنمایی و کشیده تر از حالت معمولی شود .
  2. repeat : این مقدار باعث می شود تا عکس برای پوشاندن کلیه ناحیه خطوط نمایش ، به دفعات لازم تکرار شود .
  3. round : این مقدار باعث می شود تا عکس برای پوشاندن کل ناحیه خطوط نمایش ، به صورت کاشی وار ( tile ) در تمام ناحیه قرار بگیرد . به عبارت دیگر با تکرار در 2 جهت عمودی و افقی کل فضا را پوشش خواهد داد .
border-image-repeat repeat


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

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

کد لازم برای پشتیانی نوع مرورگر
مرورگر فایرفاکس با اعمال یک تغییر در کد خاصیت از آن پشتیانی می کند . برای پشتیانی این مرورگر باید خاصیت را به صورت moz-border-image- بنویسید .
مرورگر اپرا با اعمال یک تغییر در کد خاصیت از آن پشتیانی می کند . برای پشتیانی این مرورگر باید خاصیت را به صورت o-border-image- بنویسید .
این خاصیت در مرورگر اینترنت اکسپلورر پشتیبانی نمی شود .
مرورگر کروم با اعمال یک تغییر در کد خاصیت از آن پشتیانی می کند . برای پشتیانی این مرورگر باید خاصیت را به صورت webkit-border-image- بنویسید .

مثال های عملی :

پس از توضیح روش استفاده از خاصیت و نحوه سازگاری آن با انواع مرورگر ها ، کاربرد آن را چند مثال به صورت عملی به شما نمایش می دهیم . دقت کنید که اگر مرورگر شما IE باشد ، به علت عدم پشتیبانی این مرورگر از خاصیت border-image ، خروجی ها به صورت صحیح نمایش داده نخواهند شد :
عکس استفاده شده در مثال ها ، عکس زیر است . منبع : http://www.3schools.com :

مثال 1 : در مثال اول یک عکس را به عنوان خط حاشیه برای یک تگ < div > به کار برده و کد اصلی و کد متناسب برای هر نوع مرورگر را به شما نمایش داده ایم . در کد خاصیت ابتدا آدرس کامل عکس را تعیین کرده و سپس مقدار پارامترهای width و outset را به ترتیب برابر با 30 و 30 قرار داده ایم . همچنین برای نحوه تکرار عکس گزینه round برای تکرار ،انتخاب شده است :

Example
< html >
  < head >
    < style >
      div
        {
          -moz-border-image:url(border.png) 30 30 round;     /* Firefox */
          -webkit-border-image:url(border.png) 30 30 round;     /* Safari and Chrome */
          -o-border-image:url(border.png) 30 30 round;     /* Opera */
          border-image:url(border.png) 30 30 round;     /* کد اصلی */
        }
    < /style >

  </head>
<body>
    < div >   border image example   < /div >
</body>
</html>
کد
border image example
خروجی

مثال 2 : در مثال دوم ، کد بالا را بازنویسی کرده و در آن مقدار پارامتر repeat را برابر با stretch قرار داده ایم . تفاوت را در خروجی مثال ها مقایسه نمایید :

Example
< html >
  < head >
    < style >
      div
        {
          -moz-border-image:url(border.png) 30 30 stretch;     /* Firefox */
          -webkit-border-image:url(border.png) 30 30 stretch;     /* Safari and Chrome */
          -o-border-image:url(border.png) 30 30 stretch;     /* Opera */
          border-image:url(border.png) 30 30 stretch;     /* کد اصلی */
        }
    < /style >

  </head>
<body>
    < div >   border image example   < /div >
</body>
</html>
کد
border image example
خروجی


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


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

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

نام :                 
آدرس Email :    
 
نظر شما :  
 
سوال امنیتی : پایتخت ایران ؟