خصوصیت border-image
مثال (خصوصیت border-image)
مشخص کردن یک عکس بعنوان border:
{
-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;
}
در انتهای این بیاموز، مثال های بیشتری را خواهید دید.
پشتیبانی مرورگرها
مرورگرهای Firefox, Chrome, Safari 6، خصوصیت border-image را پشتیبانی می کنند.
مرورگر Opera به پیشوند -o- نیاز دارد.
مرورگر Safari 5 به پیشوند -webkit- نیاز دارد.
تعریف و کاربرد
با استفاده از خصوصیت مختصر border-image، می توانید در یک مرحله خصوصیت های زیر را تعیین نمایید:
- border-image-source
- border-image-slice
- border-image-width
- border-image-outset
- border-image-repeat
توجه: اهمیتی ندارد که یکی از مقادیر بالا ذکر نشود، تنها رعایت ترتیب مقادیر مهم است.
می توانید از خصوصیات border-image برای ایجاد دکمه های زیبا با اندازه های مختلف استفاده نمایید.
| مقدار پیشفرض | none 100% 1 0 stretch |
|---|---|
| ارث بری | خیر |
| نسخه | CSS3 |
| JavaScript ساختار | object.style.borderImage="url(border.png) 30 30 round" |
نحوه استفاده
با استفاده از خصوصیت border-image-width می توانید اندازه ی پهنای (عرض) حاشیه ی عکس را تعیین کنید.
| مقدار | توضیحات | نمایش دادن |
|---|---|---|
| border-image-source |
آدرس مسیر عکسی که به عنوان border (حاشیه) استفاده شده است. |
|
| border-image-slice |
با استفاده از خصوصیت border-image-slice، می توانید حاشیه داخلی image-border را مشخص نمایید. |
|
| border-image-outset | ||
| border-image-repeat | نحوه نمایش تصویر در حاشیه را مشخص می کند
|
نمایش دادن » |
مثال - خودتان امتحان کنید
Border-image button
در این مثال نحوه ایجاد دکمه با استفاده از خاصیت border-image نشان داده شده است.
بیاموزهای مرتبط
CSS3 Border (بیاموز CSS3)
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 9433
دیدگاه‌ها
border-image: url(/border.png) 50 round;
سلام.من خوب متوجه نشدم.میشه به عنوان نمونه این خط کد رو که فرستادم توضیح بدین؟نمیدونم این عدد ها چی هستند..در بعضی مواقع دیدم که بصورت درصد هم نوشته میشن
سلام
قبل از هر چیز باید بدانید که با استفاده از خصوصیت مختصر border-image، می توانید در یک مرحله خصوصیت های زیر را تعیین نمایید:
1- border-image-source
2- border-image-slice
3- border-image-width
4- border-image-outset
5- border-image-repeat
بنابراین پیشنهاد می کنم مطالب ارائه شده در ارتباط با 5 خصوصیت بالا را یکمرتبه دیگر مطالعه فرمایید.
البته توجه داشته باشید که تنظیم عکس برای اطراف یک عنصر و لبه های آن با استفاده از روش بالا مرسوم نیست، و با استفاده از Bootstrap براحتی می توان گوشه ها را جذاب و یا گرد کرد ... بنابراین نیازی نیست روی خصوصیت های بالا، متمرکز شوید.
با توجه به مشاهد هایی که داشتم به این نتیجه رسیدم که خصیصه border-image-ou tset تقریبا شبیه به padding میباشد. آیا این نظریه درست است؟
با سلام.
شباهت به این معنی نیست که هر دو یه کار رو انجام می‌دن!
padding فاصله درونی شی با حاشیه آن است. اما خاصیت border و هم خانواده‌ی آن فقط روی خط حاشیه شی تأثیرگذار هست.