سبد (0)

خصوصیت 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)

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه