စီစ်ကျသုံးရပ် ပုံစံ အစိတ်အပိုင်း

  • ပြီးခဲ့သော စာကြောင်း 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 视口作为参考盒。
no-clip 不进行裁剪。
border 与 border-box 相同。
padding 与 padding-box 相同。
content 与 content-box 相同。
text 将遮罩裁剪到元素的文本。
initial 将此属性设置为其默认值。参阅 initial。
inherit 从其父元素继承此属性。参阅 inherit。

နည်းပညာ အချက်အလက်

မူကြမ်း အဆို: border-box
အမြဲတမ်းစားမှု: မဆိုပါ
လှည့်ပတ် သုံးခြင်း: မမှောက်ရသည်။ ကျမ်းကို ကြည့်ပါ:လှည့်ပတ် သုံးခြင်း。
ပုံစံ: CSS Masking Module Level 1
JavaScript ဘာသာစကား: object.style.maskClip="padding-box"

ဘာသာစကား အကူအညီ

အချက်အလက်များတွင် အဆိုပါ လက်တင်သုံးခြင်း ကို ပထမဆုံး လက်ခံသော ဘာသာစကား ဘာသာစကား ကို အမှတ်ပြုထားသည်。

ခရမ် အက်ဂျက် ပရိုဂရမ် ဆိပ် နိုင်ငံ
120 120 53 15.4 106

ပတ်သက်သော စာမျက်နှာ

ဖိုးရိုးပုံစံ အားဆိုင်သော ပိုင်ဆိုင်ခြင်း

ကိုယ်ပိုင်လုပ်ကြမ်းစီစ်ကျသုံးရပ် ပုံစံ

ကိုယ်ပိုင်လုပ်ကြမ်းစီစ်ကျသုံးရပ် ပုံစံ ပေါင်းစပ်

ကိုယ်ပိုင်လုပ်ကြမ်းစီစ်ကျသုံးရပ် ပုံစံ ပုံပြင်

ကိုယ်ပိုင်လုပ်ကြမ်းစီစ်ကျသုံးရပ် ပုံစံ ပုံအချက်

ကိုယ်ပိုင်လုပ်ကြမ်းစီစ်ကျသုံးရပ် ပုံစံ စခရာ

ကိုယ်ပိုင်လုပ်ကြမ်းစီစ်ကျသုံးရပ် ပုံစံ စခရာ အခြေ

ကိုယ်ပိုင်လုပ်ကြမ်းစီစ်ကျသုံးရပ် ပုံစံ ပြောင်းလဲ

ကိုယ်ပိုင်လုပ်ကြမ်းစီစ်ကျသုံးရပ် ပုံစံ အကျယ်

ကိုယ်ပိုင်လုပ်ကြမ်းစီစ်ကျသုံးရပ် ပုံစံ အမျိုး

  • ပြီးခဲ့သော စာကြောင်း mask
  • နောက်ပိုင်း စာကြောင်း mask-composite