ویژگی border-image-slice CSS
- صفحه قبل border-image-repeat
- صفحه بعدی border-image-source
تعریف و استفاده
ویژگی border-image-slice انحراف به سمت درون لبه تصویر را تعیین می‌کند.
لطفاً به منابع مراجعه کنید:
آموزش CSS3:حلقه‌های CSS3
مثال
تعیین انحراف به سمت درون لبه تصویر:
div
{
border-image-source: url(border.png);
border-image-slice: 50% 50%;
}
آموزش CSS
border-image-slice: number|%|fill;
نکته:این ویژگی مقادیر انحراف به سمت درون لبه‌های تصویر را تعیین می‌کند، و تصویر به نه بخش تقسیم می‌شود: چهار گوشه، چهار لبه و یک بخش میانی. مگر اینکه از کلمه کلیدی fill استفاده شود، بخش میانی تصویر حذف می‌شود. اگر مقدار چهارم را حذف کنید، آن مقدار با دومین مقدار مشابه خواهد بود. اگر مقدار سوم را حذف کنید، آن مقدار با اولین مقدار مشابه خواهد بود. اگر مقدار دوم را حذف کنید، آن مقدار با اولین مقدار مشابه خواهد بود.
مقدار ویژگی
| مقدار | توضیح |
|---|---|
| number | مقدار عددی، نشان‌دهنده پیکسل‌ها در تصویر (اگر تصویر رزولوشن دار باشد) یا مختصات ویکتور (اگر تصویر ویکتور باشد). |
| % | درصد از اندازه تصویر نسبتاً: عرض تصویر تأثیر می‌گذارد بر انحراف افقی، و ارتفاع تأثیر می‌گذارد بر انحراف عمودی. |
| fill | قسمت میانی تصویر لبه را نگه می‌دارد. |
جزئیات فنی
| مقدار پیش‌فرض: | 100% |
|---|---|
| ارث‌پذیری: | خیر |
| نسخه: | CSS3 |
| آموزش نحوی JavaScript: | object.style.borderImageSlice="50% 50%" |
پشتیبانی مرورگر
اعداد در جدول نشان‌دهنده نسخه اولین مرورگر پشتیبان از این ویژگی هستند.
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 15.0 | 11.0 | 15.0 | 6.0 | 15.0 |
لطفاً به منابع مراجعه کنید border-image ویژگی‌ها.
- صفحه قبل border-image-repeat
- صفحه بعدی border-image-source
