CSS ماسک کلپ

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

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"

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

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

کروم ایج فایرفاکس سافاری آپرا
120 120 53 15.4 106

متعلقہ صفحات

تعلیم:CSS ماسک

مشارکت:CSS ماسک کی اپریٹ

مشارکت:CSS ماسک کمپوزائٹ

مشارکت:CSS ماسک انیمج

مشارکت:CSS ماسک موڈ

مشارکت:CSS ماسک آورجین

مشارکت:CSS ماسک پوزیشن

مشارکت:CSS ماسک ریپیٹ

مشارکت:CSS ماسک سائز

مشارکت:CSS ماسک ٹائپ