পাঠ্যসূচী সুপারিশ:

CSS circle() ফাংশন

সংজ্ঞা ও ব্যবহার circle() CSS-র

circle() ফাংশন clip-path প্রয়োগ shape-outside প্রয়োগ

প্রয়োগ

একক

উদাহরণ 1

img {
  clip-path: circle(50%);
}

স্বয়ং প্রয়াস করুন

ছবিটিকে 50% রেডিয়াসের বৃত্তাকার কাটা করুন:

উদাহরণ 2

img {
  ছবিটিকে 50% রেডিয়াসের বৃত্তাকার কাটা করুন এবং বৃত্তের কেন্দ্রকে ডানদিকে স্থাপন করুন:
}

স্বয়ং প্রয়াস করুন

clip-path: circle(50% at right);

উদাহরণ 3 clip-path এবং circle() অ্যানিমেশন প্রভাব কর্মকর্তা করুন:

#myDIV {
  width: 100px;
  height: 100px;
  background-color: coral;
  color: green;
  animation: mymove 5s infinite;
  clip-path: circle(50%);
}
@keyframes mymove {
  50% {clip-path: circle(20%);}
}

স্বয়ং প্রয়াস করুন

উদাহরণ 4

মিলিত ব্যবহার circle()、clip-path এবং shape-outside:

img {
  float: left;
  clip-path: circle(40%);
  shape-outside: circle(45%);
}

স্বয়ং প্রয়াস করুন

CSS সংজ্ঞা

circle(সংখ্যা অবস্থান)

প্রযুক্তিগত বিস্তার

ব্রাউজার সমর্থন

টেবিলের সংখ্যা এই ফাংশনটি সম্পূর্ণরূপে সমর্থনকারী প্রথম ব্রাউজার সংস্করণটির জন্য

সংশ্লিষ্ট পাতা

উল্লেখ:CSS clip-path এট্রিবিউট

উল্লেখ:CSS shape-outside অপারেশন

উল্লেখ:CSS ellipse() ফাংশন

উল্লেখ:CSS inset() ফাংশন

উল্লেখ:CSS polygon() ফাংশন