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 |
| قانون جاوااسکریپت: | 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
