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 {
  کیرنل کا پیمانہ: 100 پیچس;
  علائی کا پیمانہ: 100 پیچس;
  بگاڑی رنگ: کورل;
  رنگ: سبز;
  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 کلیپ پتھ پرپرتی

مشارکت:CSS shape-outside کا نمائش

مشارکت:CSS circle() فنکشن

مشارکت:CSS inset() فنکشن

مشارکت:CSS polygon() فنکشن