جدول الدروس

دليل مرجعي CSS

خصائص CSS

选修课

课程推荐：

صندوق CodeW3C.com

خصائص قطع الكمامة

الصفحة السابقة mask
الصفحة التالية mask-composite

定义和用法

mask-clip 属性用于指定遮罩图像影响的区域。

实例

展示 mask-clip 属性的不同值：

.masked {
  width: 150px;
  height: 150px;
  background: green;
  border: 30px solid blue;
  padding: 20px;
  -webkit-mask-image: url(img_circle.svg);
  mask-image: url(img_circle.svg);
  mask-size: 100% 100%;
}
.mask1 {
  mask-clip: border-box;
}
.mask2 {
  mask-clip: content-box;
}
.mask3 {
  mask-clip: padding-box;
}
.mask4 {
  mask-clip: fill-box;
}
.mask5 {
  mask-clip: stroke-box;
}

جرب بنفسك

قواعد اللغة CSS

mask-clip: border-box|content-box|padding-box|fill-box|stroke-box|view-box|no-clip|border|padding|content|text|initial|inherit;

قيمة الخاصية

القيمة	الوصف
border-box	يتم قطع المحتوى المرسوم إلى صندوق الحواف (border box). القيمة الافتراضية.
content-box	يتم قطع المحتوى المرسوم إلى صندوق المحتوى (content box).
padding-box	يتم قطع المحتوى المرسوم إلى صندوق المقدار (padding box).
fill-box	يتم قطع المحتوى المرسوم إلى صندوق العنصر (object bounding box).
stroke-box	يتم قطع المحتوى المرسوم إلى صندوق الحواف (stroke bounding box).
view-box	استخدم SVG viewport الأقرب كمرجع للصندوق.
no-clip	لا تقم بقطع.
border	مثل border-box.
padding	مثل padding-box.
content	مثل content-box.
text	قطع الستار إلى النص الموجود في العنصر.
initial	عندما يتم تعيين هذا الخصائص إلى قيمته الافتراضية. يرجى الرجوع إلى initial.
inherit	ينتقل هذا الخصائص من عنصر الأب. يرجى الرجوع إلى inherit.

تفاصيل التقنية

القيمة الافتراضية:	border-box
الوراثة:	لا
صناعة التحريك:	غير مدعوم. يرجى الرجوع إلى:خصائص التحريك.
الإصدار:	مستوى 1 لمodule CSS Masking
قواعد اللغة الجافا سكربت:	object.style.maskClip="padding-box"