از ویژگی 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 مراجعه کنید.
سوال داری؟ برو به پنل پرسش و پاسخ