ویژگی border-image-slice تصویری که قرار است به عنوان حاشیه از آن استفاده شود را به نه قسمت تقسیم می کند. که قسمت ها شامل چهار گوشه, چهار لبه و یک قسمت مرکز می باشند.
این ویژگی عمل تقسیم کردن تصویر را بر اساس چهار مقداری که برایش تعیین می شود انجام می دهد, بطوریکه هر یک از مقادیر فاصله یک خط فرضی از هر یک از لبه ها را به سمت داخل مشخص می کنند.
به عنوان نمونه تصویر زیر به نه قسمت تقسیم شده است. در این مثال فواصل از لبه ها برابر هستند و همگی مقدار 124 پیسکل را دارند.
ویژگی border-image-slice می تواند چهار, سه, دو و یا یک مقدار داشته باشد.
border-image-slice: 100 125 50 125; /* top right bottom left */
border-image-slice: 100 50 125; /* top=10 right=left=50 bottom=125 */
border-image-slice: 100 125; /* top=bottom=100 right=left=125 */
border-image-slice: 100; /* top=bottom=right=left=100 */
گوشه های تصویر بر روی گوشه های عنصری که قرار است حاشیه تصویری برای آن اعمال شود, قرار می گیرند.همچنین لبه های مشخص شده از تصویر بر روی لبه های عنصر قرار می گیرند. ویژگی border-image-repeat تعیین کننده چگونگی این عمل می باشد. اندازه و مکان این تکه ها برای عنصر مربوطه توسط ویژگی های border-image-width و border-image-outset تعیین می شوند. می توانید برای جزییات بیشتر در مورد نحوه کار این ویژگی ها با هم به مطلب border-image مراجعه کنید.
قسمت مرکزی تصویر در نظر گرفته نمی شود مگر اینکه کلمه کلیدی fill را برای ویژگی border-image-slice تعیین کنیم. که در این صورت قسمت مرکز تصویر به عنوان پس زمینه عنصر تعیین می شود. این کلمه کلیدی می تواند اول و یا آخر و حتی بین مقادیری که برای border-image-slice تنظیم می شوند, قرار بگیرد.
ناحیه هایی که توسط border-image-slice تعیین می شوند, می توانند هم پوشانی داشته باشند, که در این صورت اگر مجموع اندازه ناحیه سمت چپ و راست برابر عرض تصویر یا بیشتر از آن باشد, آن وقت حاشیه بالا و پایین عنصر بدون تصویر خواهد بود. و همینطور مجموع اندازه ناحیه بالا و پایین برابر ارتفاع تصویر یا بیشتر از آن باشد, آن وقت حاشیه راست و چپ عنصر بدون تصویر خواهند بود.
مقادیر این ویژگی می توانند عدد و یا درصد باشند. (مقادیر طولی (px,em,…) قابل قبول نیستند) مقدار عددی برای تصاویر پیکسلی (Raster) تعیین کننده تعداد پیکسل و برای تصاویر برداری (Vector) تعیین کننده مختصات خواهد بود.
در دموی زیر با تغییر مقادیر این ویژگی با نحوه کار آن بیشتر آشنا شوید. همچنین از کلمه کلیدی fill نیز استفاده کنید.
See the Pen border-image-slice by Mojtaba Seyedi (@seyedi) on CodePen.
سلام
من متوجه نمیشم چطوری مال من از اون پهنا و ارتفاعی که تعیین میکنم عکس میزنه بیرون
تازه عکس تکرار میشه مثلا مقدار پایین رو هر چی کم میکنم تصویر بیشتر تکرار میشه تو 8 و 6
چپ و راست هم همین طوره
مگه نباید عکس تو اون پهنا و ارتفاع باشه ؟
مگه قاطی کردم کلا @_@
دموی اخری عکس نداره !؟