ویژگی clip-path CSS
تعریف و استفاده
ویژگی clip-path به شما امکان می‌دهد تا عناصر را به شکل‌های پایه‌ای یا منبع SVG برش دهید.
توضیح:clip-path جایگزین clip property قدیمی خواهد شد.
جمله‌بندی 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 را پشتیبانی می‌کند.
