বৈশিষ্ট্য mask-clip

বৈশিষ্ট্য 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>

Результат:

আরও দেখুন