mask-clip ගුණය

mask-clip ගුණය මූලද්‍රව්‍යයක් ඇතුළත mask ප්‍රදර්ශනය වන ප්‍රදේශය සකසයි. මූලද්‍රව්‍යයේ කුමන කොටස් mask කිරීමෙන් ප්‍රභාවිත වනු ඇතිද සහ කුමන කොටස් වෙනසකින් තොරව දෘශ්‍යමාන වේද යන්න එය නිර්වචනය කරයි.

වාක්‍ය රචනය

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 භාවිතය

Mask මූලද්‍රව්‍යයේ සීමාවන් මඟහරින විට 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>

Результат:

මෙයද බලන්න