جدول درس

دستورالعمل‌های مرجع CSS

ویژگی‌های CSS

درس‌های انتخابی

پیشنهاد دوره:

کیت ابزار CodeW3C.com

ویژگی mask-clip CSS

صفحه قبل 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
ارث‌برداری:	خیر
انیمیشن‌سازی:	پشتیبانی نمی‌شود. لطفاً به:ویژگی‌های مرتبط با انیمیشن.
نسخه:	مستند CSS Masking Module Level 1
آموزش زبان جاوااسکریپت:	object.style.maskClip="padding-box"