စတုဂံ အနည်း

定义和用法

clip-path 属性使您可以将元素裁剪为基本形状或 SVG 源。

ဝေဖန်:clip-path အခွင့်အရေး သည် အဖြစ်အပျက်အချက်အလက် ဖြစ်သော clip အခွင့်အရေး ကို အစားထိုးပါ။

အမှတ်ပြ

ပုံကို 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 SVG <clipPath> အက်ဥပဒ် သို့ စွဲဆိုသော URL ကို အသုံးပြုပါ။
basic-shape အစိတ်အစိတ်အပြားအပြား အက်ဥပဒ်ကို အက်ဥပဒ်အခြေခံပုံစံ ဖြစ်သော နည်းပုံအချက်အလက် နှင့် ပြန်လည်တည်ဆောက်ပါ။
margin-box အဝေးလက်ဆီးကျယ်ပြီး အစိတ်အစိတ်အပြားအပြား အသုံးပြုပါ။
border-box အဝေးကျယ်ပြီး အစိတ်အစိတ်အပြားအပြား အသုံးပြုပါ။
padding-box ပေါ်တွင်းအဝန်းကျယ်ပြီး အစိတ်အစိတ်အပြားအပြား အသုံးပြုပါ။
content-box စာကြိုးကျယ်ပြီး အစိတ်အစိတ်အပြားအပြား အသုံးပြုပါ။
fill-box အရောက်ကျယ်ပြီး အစိတ်အစိတ်အပြားအပြား အသုံးပြုပါ။
stroke-box လက်ဆီးသတ္တိကျယ်ပြီး အစိတ်အစိတ်အပြားအပြား အသုံးပြုပါ။
view-box SVG စတန်းလျှက် ကို စတင်ရုပ်သုံး အစိတ်အစိတ်အပြားအပြား အသုံးပြုပါ။
none မနှစ်မနှစ်သက်သော ပုံစံ။ တစ်ခါမှ သတ္တိများ ကို ဖွင့်လဲဘဲ သတ္တိအက်ဥပဒ်ကို မဖွင့်လဲဘဲ ဖွင့်လိုက်ပါ။

နည်းပါးပေါ်မှတစ်ဆင်း

မနှစ်မနှစ်သက်သော ပုံစံ： none
သက်ရောက်ခြင်း： မမရှိ
အသံရောပ်သတ္တိ ပြုလုပ်ခြင်း： ထောက်ပံ့သည် (အခြေခံပုံစံ သာ ထောက်ပံ့)။ ကျမ်းကို ကြည့်ပါ:အသံရောပ်သတ္တိ ကို ထောက်ပံ့သော အခွင့်အရေး。
ပုံစံ： CSS Masking Module Level 1
JavaScript ဘာသာစကား： object.style.clipPath="circle(50%)"

ဘာသာသား ထောက်ပံ့

ဘတ်မြစ်တွင် စာရင်းဝင်သည့် နည်းပါးများ သည် အထူးသဖြင့် ထောက်ပံ့သော ဘာသာသား သမိုင်းပြီး ပြင်းပြင်းထန်ထန်သော ဘာသာသား ပေါ်မှတစ်ဆင်း သုံးစွဲနေသည်။

Chrome IE / Edge Firefox Safari Opera
55.0
23.0 -webkit-		 79.0* 54.0 9.1
6.1 -webkit-		 42.0
15.0 -webkit-

* Edge သည် SVG အက်ဥပဒ် (HTML အက်ဥပဒ် ကို ထောက်ပံ့ခြင်း မရှိ) ပေါ်မှတစ်ဆင်း clip-path ကို ထောက်ပံ့သည်。