خصائص clip-path CSS
تعریف و استفاده
ویژگی clip-path به شما امکان میدهد تا عناصر را به شکلهای پایهای یا منبع SVG برش دهید.
نکته:clip-path جایگزین clip属性 منسوخ شده خواهد شد.
جملات CSS
clip-path: clip-source|basic-shape|margin-box|border-box|padding-box|content-box|fill-box|stroke-box|view-box|none;
مقدار ویژگی
| مقدار | شرح |
|---|---|
| clip-source | URL اشارهدار به عنصر SVG <clipPath> را تعریف کنید. |
| basic-shape | عناصر را به شکلهای پایهای: دایره، بیضی، مستطیل یا ستاره برش دهید. |
| margin-box | از جعبه مرجع حاشیه (margin box) به عنوان جعبه مرجع استفاده کنید. |
| border-box | از جعبه مرجع حاشیه (border box) به عنوان جعبه مرجع استفاده کنید. |
| padding-box | از جعبه مرجع پادشاهی (padding box) به عنوان جعبه مرجع استفاده کنید. |
| content-box | از جعبه مرجع محتوا (content box) به عنوان جعبه مرجع استفاده کنید. |
| fill-box | از جعبه مرجع شیء (object bounding box) به عنوان جعبه مرجع استفاده کنید. |
| stroke-box | از جعبه مرجع خط (stroke bounding box) به عنوان جعبه مرجع استفاده کنید. |
| view-box | از SVG viewport به عنوان جعبه مرجع استفاده کنید. |
| none | مقدار پیشفرض. هیچ مسیر برش ایجاد نمیشود. |
جزئیات فنی
| مقدار پیشفرض: | none |
|---|---|
| وراثت: | خیر |
| انیمیشنسازی: | پشتیبانی (فقط برای مقدار basic-shape). لطفاً به: مراجعه کنیدخصوصیات مرتبط با انیمیشن. |
| نسخه: | مستند CSS Masking Module Level 1 |
| جملات JavaScript: | object.style.clipPath="circle(50%)" |
پشتیبانی مرورگر
اعداد در جدول نشاندهنده نسخه اولین مرورگر پشتیبان از این ویژگی هستند.
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 55.0 23.0 -webkit- |
79.0* | 54.0 | 9.1 6.1 -webkit- |
42.0 15.0 -webkit- |
* Edge فقط در عناصر SVG (عناصر HTML پشتیبانی نمیشود) clip-path را پشتیبانی میکند.
