سبد (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)

دیدگاه‌ها  

0 # فرهاد 1396-04-27 12:35
border-image: url(/border.png) 50 round;
سلام.من خوب متوجه نشدم.میشه به عنوان نمونه این خط کد رو که فرستادم توضیح بدین؟نمیدونم این عدد ها چی هستند..در بعضی مواقع دیدم که بصورت درصد هم نوشته میشن
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # امیر پهلوان صادق 1396-04-28 08:37
سلام
قبل از هر چیز باید بدانید که با استفاده از خصوصیت مختصر border-image، می توانید در یک مرحله خصوصیت های زیر را تعیین نمایید:
1- border-image-source
2- border-image-slice
3- border-image-width
4- border-image-outset
5- border-image-repeat
بنابراین پیشنهاد می کنم مطالب ارائه شده در ارتباط با 5 خصوصیت بالا را یکمرتبه دیگر مطالعه فرمایید.
البته توجه داشته باشید که تنظیم عکس برای اطراف یک عنصر و لبه های آن با استفاده از روش بالا مرسوم نیست، و با استفاده از Bootstrap براحتی می توان گوشه ها را جذاب و یا گرد کرد ... بنابراین نیازی نیست روی خصوصیت های بالا، متمرکز شوید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # saeed mohammdpour 1394-09-21 00:25
با توجه به مشاهد هایی که داشتم به این نتیجه رسیدم که خصیصه border-image-ou tset تقریبا شبیه به padding میباشد. آیا این نظریه درست است؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # مهرداد صلاحی 1394-09-21 08:37
با سلام.
شباهت به این معنی نیست که هر دو یه کار رو انجام می‌دن!

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