border-image-source

از ویژگی border-image-source برای تعیین تصویری که به عنوان یک لایه پس زمینه اضافه به جای حاشیه ای که توسط ویژگی border-style مشخص می شود, استفاده می شود.

اگر مقدار این ویژگی برابر با none باشد و یا تصویر قابل نمایش نباشد, استایل های مربوط به حاشیه اصلی (border) بر روی عنصر اعمال می شوند. در غیر این صورت حاشیه اصلی قابل مشاهده نخواهد بود و به جای آن حاشیه تصویری که توسط ویژگی های زیر برای عنصر تعریف شده است, ترسیم می شود:
border-image-slice, border-image-width, border-image-outset, border-image-repeat

برای جزییات بیشتر در مورد نحوه کار border-image-source با ویژگی های بالا به مطلب مربوط به border-image مراجعه کنید.

نمونه های صحیح استفاده از این ویژگی:

 


border-image-source: none; /* حاشیه تصویری اعمال نمی شود و به جای آن حاشیه اصلی اعمال می شود */
border-image-source: url(path/to/some-image.png);
border-image-source: linear-gradient(to bottom, #333333, #eeeeee); /* گرادینت ها نیز نوعی تصویر هستند */

 

برای دمو و مثال های بیشتر به border-image مراجعه کنید.

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *