मास्क-क्लिप प्रॉपर्टी

mask-clip प्रॉपर्टी तत्व के उस क्षेत्र को सेट करती है, जिसके भीतर मास्क दिखाई देगी। यह निर्धारित करती है कि तत्व के कौन से हिस्से मास्किंग से प्रभावित होंगे और कौन से हिस्से बिना किसी बदलाव के दिखाई देते रहेंगे।

सिंटैक्स

cssसिलेक्टर {
  mask-clip: मान | no-clip;
}

मान

डिफ़ॉल्ट मान: border-box.

उदाहरण . विभिन्न क्षेत्रों में mask-clip का अनुप्रयोग

सीमाओं और पैडिंग वाले तत्व पर mask-clip के विभिन्न मानों की तुलना करें:

html<div class="box border-box">border-box</div>
<div class="box padding-box">padding-box</div>
<div class="box content-box">content-box</div>

css.box {
  width: 200px;
  height: 100px;
  margin: 20px;
  padding: 20px;
  border: 10px dashed black;
  background: linear-gradient(45deg, red, blue);
  mask-image: linear-gradient(to right, black, transparent);
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  display: inline-block;
}

.border-box {
  mask-clip: border-box;
}

.padding-box {
  mask-clip: padding-box;
}

.content-box {
  mask-clip: content-box;
}

Результат:

उदाहरण . no-clip का उपयोग

no-clip मान का प्रदर्शन, जब मास्क तत्व की सीमाओं से बाहर निकल जाती है:

html<div id="elem"></div>

css#elem {
  width: 200px;
  height: 200px;
  background: linear-gradient(45deg, red, blue);
  mask-image: radial-gradient(circle, black 50%, transparent 70%);
  mask-size: 300px 300px;
  mask-position: center;
  mask-clip: no-clip;
  border: 2px solid black;
}

Результат:

उदाहरण . विभिन्न mask-clip मानों के साथ SVG

SVG तत्व पर विभिन्न मानों का अनुप्रयोग:

html<svg width="400" height="200">
  <defs>
    <mask id="mask1" maskContentUnits="objectBoundingBox">
      <rect x="0.1" y="0.1" width="0.8" height="0.8" fill="white"/>
    </mask>
  </defs>
  
  <rect x="10" y="10" width="180" height="180" fill="blue" 
    mask="url(#mask1)" mask-clip="fill-box"/>
    
  <rect x="210" y="10" width="180" height="180" fill="red" 
    mask="url(#mask1)" mask-clip="view-box"/>
</svg>

Результат:

यह भी देखें