CSS ellipse() ফাংশন

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

CSS-র ellipse() ফাংশন দুটি রেখদন্ড x এবং y নিয়ে একটি এলিপ্স নির্দিষ্ট করে

ellipse() ফাংশন সাধারণত clip-path প্রতিযোগীভাবে shape-outside প্রতিযোগীভাবে ব্যবহার করুন

একক

উদাহরণ 1

ছবিটিকে x রেখদন্ডের 50%、y রেখদন্ডের 30% এলিপ্স হিসাবে কাটা করুন:

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

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

উদাহরণ 2

ছবিটিকে x রেখদন্ডের 50%、y রেখদন্ডের 30% এলিপ্স হিসাবে কাটা এবং এলিপ্সের কেন্দ্রকে ডানদিকে নির্দিষ্ট করুন:

img {
  clip-path: ellipse(50% 30% at right);
}

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

উদাহরণ 3

ব্যবহার করুন clip-path এবং ellipse() অ্যানিমেশন প্রভাব করুন:

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

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

উদাহরণ 4

সংযুক্তভাবে ব্যবহার করুন ellipse()、clip-path এবং shape-outside:

img {
  float: left;
  clip-path: ellipse(50% 30%);
  shape-outside: ellipse(55% 35%);
}

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

CSS 语法

ellipse(xy-radius অবস্থানে)

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

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

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

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

উল্লেখ:CSS clip-path প্রতিশব্দ

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

উল্লেখ:CSS circle() 函数

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

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