CSS clip-path প্রতিশব্দ

  • পূর্ববর্তী পৃষ্ঠা clip
  • পরবর্তী পৃষ্ঠা color

সংজ্ঞা ও ব্যবহার

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 মার্জিন বক্স (margin box) হিসাবে উল্লেখ করা হয়。
border-box বর্তনী বক্স (border box) হিসাবে উল্লেখ করা হয়。
padding-box প্যাডিং বক্স হিসাবে উল্লেখ করা হয়。
content-box কনটেন্ট বক্স হিসাবে উল্লেখ করা হয়。
fill-box অবজেক্ট বোর্ডার বক্স (object bounding box) হিসাবে উল্লেখ করা হয়。
stroke-box স্ট্রক বোর্ডার বক্স (stroke bounding box) হিসাবে উল্লেখ করা হয়。
view-box SVG ভিউপসক্তি কেন্দ্র হিসাবে উল্লেখ করা হয়。
none ডিফল্ট মান। কোনও কাটা পথ না তৈরি করা হয়。

টেকনিক্যাল বিবরণ

ডিফল্ট মান: none
প্রবণতা: না
অ্যানিমেশন নির্মাণ: সমর্থন (শুধুমাত্র basic-shape মানের জন্য)। দেখুন:অ্যানিমেশন-সংক্রান্ত বৈশিষ্ট্য。
সংস্করণ: 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-

এডজ কেবল SVG এলিমেন্ট (HTML এলিমেন্টকে সমর্থন করে না) তে clip-path-এ সমর্থন করে。

  • পূর্ববর্তী পৃষ্ঠা clip
  • পরবর্তী পৃষ্ঠা color