ویژگی border-image-slice در CSS

border-image-slice Property

ویژگی border-image-slice در CSS مشخص می کند که تصویری که توسط border-image-source تعیین می شود، چگونه برش داده شود. این تصویر همواره به 9 قسمت تقسیم میشود. 4 گوشه، چهار ضلع و قسمت میانی. قسمت میانی همیشه خالی در نظر گرفته میشود بجز زمانیکه از مقدار fill استفاده شود.

در تصویر زیر این مکانها نمایش داده شده اند:

• مناطق یک تا چهار، گوشه ها هستند. هرکدام اینها تنها یک بار بکار گرفته می شوند تا گوشه های تصویرِ نهایی را شکل دهند.
• مناطق پنج تا هشت، اضلاع هستند. این مناطق تکرار می شوند، تغییر اندازه می دهند یا به طرق دیگر تغییر شکل پیدا می کنند تا با ابعاد عنصر مطابقت پیدا کنند.
• منطقه نه، قسمت میانی عنصر است. این منطقه بطور پیشفرض دیده نمی شود اما در صورت استفاده از کلیدواژه fill مانند تصویر پس زمینه عمل خواهد کرد.

نحوه نوشتار

/* تمام جهات */
border-image-slice: 30%;

/* افقی | عمودی */
border-image-slice: 10% 30%;

/* پایین | افقی | بالا */
border-image-slice: 30 30% 45;

/* چپ | پایین | راست | بالا */
border-image-slice: 7 12 14 5; 

/* (fill) استفاده از کلید واژه */
border-image-slice: 10% fill 7 12;

ویژگی border-image-slice چهار مقدار می پذیرد که میتواند بصورت عددی و یا درصد باشد. این مقادیر موقعیت هر برش را مشخص می کند. مقادیر منفی غیر قابل استفاده هستند.

مقادیر

عدد

عددها نمایانگر تعداد پیکسل در تصاویر پیکسلی و مختصات برای تصاویر وکتور هستند.

درصد

در صد ها با عرض و ارتفاع تصویر در ارتباط هستند.

fill​

سبب میشود تا قسمت میانی تصویر دیده شود.

در مثال زیر نحوه عملکرد این ویژگی را میبینیم:

html

<div class="border-image1">border-image-slice: 15%;</div>
<div class="border-image2">border-image-slice: 25%;</div>
<div class="border-image3">border-image-slice: 35%;</div>
<p>از این تصویر استفاده شده است:</p>
<img src="http://my-project.ir/img/border.png" />

css

div {
    border: 10px solid transparent;
    padding: 15px;
    border-image: url(http://my-project.ir/img/border.png) round;
    font-family: monospace;
    margin-top: 20px;
}
.border-image1 {
    border-image-slice: 15%; 
}
.border-image2 {
    border-image-slice: 25%; 
}
.border-image3 {
    border-image-slice: 35%; 
}

مشاهده و ویرایش کد در حالت تمام صفحه

پشتیبانی مرورگرها
تمام مرورگرها از این ویژگی پشتیبانی میکنند.