خصوصیت border-image

چاپ

مثال (خصوصیت border-image)

مشخص کردن یک عکس بعنوان border:

div
{
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 */
-o-border-image:url(border.png) 30 30 round; /* Opera */
border-image:url(border.png) 30 30 round;
}
خودتان امتحان کنید »

در انتهای این بیاموز، مثال های بیشتری را خواهید دید.

پشتیبانی مرورگرها

Internet Explorer Firefox Opera Google Chrome Safari

مرورگرهای Firefox, Chrome, Safari 6، خصوصیت border-image را پشتیبانی می کنند.

مرورگر Opera به پیشوند -o- نیاز دارد.

مرورگر Safari 5 به پیشوند -webkit- نیاز دارد.

تعریف و کاربرد

با استفاده از خصوصیت مختصر border-image، می توانید در یک مرحله خصوصیت های زیر را تعیین نمایید:

  1. border-image-source
  2. border-image-slice
  3. border-image-width
  4. border-image-outset
  5. border-image-repeat

توجه: اهمیتی ندارد که یکی از مقادیر بالا ذکر نشود، تنها رعایت ترتیب مقادیر مهم است.

می توانید از خصوصیات border-image برای ایجاد دکمه های زیبا با اندازه های مختلف استفاده نمایید. 

مقدار پیشفرض none 100% 1 0 stretch
ارث بری خیر
نسخه CSS3
JavaScript ساختار object.style.borderImage="url(border.png) 30 30 round"

نحوه استفاده

border-image: source slice width outset repeat;

با استفاده از خصوصیت border-image-width می توانید اندازه ی پهنای (عرض) حاشیه ی عکس را تعیین کنید.

مقدارتوضیحاتنمایش دادن
border-image-source

آدرس مسیر عکسی که به عنوان border (حاشیه) استفاده شده است. 

  
border-image-slice

با استفاده از خصوصیت border-image-slice، می توانید حاشیه داخلی image-border را مشخص نمایید.

  
   
border-image-outset  
border-image-repeat نحوه نمایش تصویر در حاشیه را مشخص می کند
  • تکرار شود (repeat)
  • با تغییر اندازه تصویر، بدون برش از ابتدا تا انتهای ناحیه بصورت یکسان تکرار شود (round)
  • کشیده شود (stretch)
 نمایش دادن »
مثالs

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

Border-image button
در این مثال نحوه ایجاد دکمه با استفاده از خاصیت border-image نشان داده شده است.

بیاموزهای مرتبط

CSS3 Border (بیاموز CSS3)

نوشته شده توسط امیر پهلوان صادق
بازدید: 9166