CSS circle() فنکشن

تعریف و استعمال

CSS کا circle() فنکشن استعمال کیا جاتا ہے تاکہ ایک دائرہ کو تعریف کیا جائے جس میں رینج اور پوزیشن موجود ہوتی ہیں。

circle() فنکشن عام طور پر clip-path صفت اور shape-outside صفت ساتھ استعمال کریں

مثال

مثال 1

تصویر کو 50% کی رینج کا دائرہ بنائیں:

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

خود کا تجربہ کریں

مثال 2

تصویر کو 50% کی رینج کا دائرہ بنائیں، اور اس کی مرکز کو راستے پر نکلائیں:

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

خود کا تجربہ کریں

مثال 3

استعمال کریں clip-path اور circle() آنیماشن کا اثر دکھائیں:

#myDIV {
  کمر درازائی: 100 پیچس;
  علائی دائرہ: 100 پیچس;
  بگلوانی رنگ: کورل;
  رنگ: سبز;
  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(radius پوزیشن پر استعمال کریں)

تکنیکی تفصیلات

براوزر سپورٹ

جداول میں نمبرات پہلی بار اس فنکشن کو پورا طور پر سپورٹ کرنے والی براوزر کی نسخہ کا نمبر ہیں。

متعلقہ صفحات

مراجع:CSS کلپ-پتھ اپریٹر

مراجع:CSS شپ-آوت-سائیڈ پراپرٹی

مراجع:CSS ellipse() فنکشن

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

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