CSS clip-path کی خاصیت

تعریف و استفاده

ویژگی clip-path به شما امکان می‌دهد تا عناصر را به شکل‌های پایه‌ای یا منبع SVG برش دهید.

نکته:clip-path جایگزین clip attribute قدیمی خواهد شد.

مثال

تصویر را به دایره 50% برش دهید:

img {
  clip-path: circle(50%);
}

آزمایش کنید

قوانین 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
قوانین جاوااسکریپت: object.style.clipPath="circle(50%)"

پشتیبانی مرورگر

اعداد در جدول نشان‌دهنده نسخه اولین مرورگر هستند که این ویژگی را به طور کامل پشتیبانی می‌کند.

چروم آئی ای / ایج فائر فاکس سافری اوپرا
55.0
23.0 -webkit-		 79.0* 54.0 9.1
6.1 -webkit-		 42.0
15.0 -webkit-

* Edge صرفاً در عناصر SVG (عناصر HTML پشتیبانی نمی‌شود) clip-path را پشتیبانی می‌کند.