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 సమీప ఎస్విజి వీక్స్ బాక్స్ ను పరిగణనలోకి తీసుకుంటుంది。
no-clip క్లిప్ లేదు。
border border-box తో అదే
padding padding-box తో అదే
content content-box తో అదే
text మాస్క్ క్లిప్ ను ఎలిమెంట్ యొక్క టెక్స్ట్ లోకి చేర్చండి.
initial ఈ లక్షణాన్ని అప్రమేయ విలువకు సెట్ చేయండి. దయచేసి ఈ లింక్ ను సందర్శించండి: initial。
inherit ఈ లక్షణాన్ని తన ముందస్తు ఎలిమెంట్ నుండి పారంపర్యం చేసుకుంటుంది. దయచేసి ఈ లింక్ ను సందర్శించండి: inherit。

సాంకేతిక వివరాలు

అప్రమేయ విలువ: border-box
పారంపర్యం కారకత ఏ
అనిమేషన్ నిర్మాణం: మద్దతు లేదు. దయచేసి ఈ లింక్ ను సందర్శించండి:అనిమేషన్ సంబంధిత లక్షణాలు。
సంస్కరణ: CSS మాస్కింగ్ మొడ్యూల్ లెవల్ 1
జావాస్క్రిప్ట్ సంకేతబద్ధత object.style.maskClip="padding-box"

బ్రౌజర్ మద్దతు

పట్టికలో ఉన్న సంఖ్యలు ఈ లక్షణాన్ని పూర్తిగా మద్దతు ఇస్తున్న బ్రౌజర్ సంస్కరణను సూచిస్తాయి。

క్రోమ్ ఎడ్జ్ ఫైర్ఫాక్స్ సఫారీ ఆపెరా
120 120 53 15.4 106

相关页面

教程：CSS మాస్కులు

పరిచయం:CSS మాస్క్ అట్రిబ్యూట్

పరిచయం:CSS మాస్క్-కాంపోజిట్ అట్రిబ్యూట్

పరిచయం:CSS మాస్క్-ఇమేజ్ అట్రిబ్యూట్

పరిచయం:CSS మాస్క్-మోడ్ అట్రిబ్యూట్

పరిచయం:CSS మాస్క్-ఓరిజిన్ అట్రిబ్యూట్

పరిచయం:CSS మాస్క్-పోజిషన్ అట్రిబ్యూట్

పరిచయం:CSS మాస్క్-రీపీట్ అట్రిబ్యూట్

పరిచయం:CSS మాస్క్-సైజ్ అట్రిబ్యూట్

పరిచయం:CSS మాస్క్-టైప్ అట్రిబ్యూట్