وظيفة CSS ellipse()

التعريف والاستخدام

تعريف CSS ellipse() تعريف وظيفة CSS لتكوين دائرة تحتوي على نصف قطرين 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 مسار-قص

مرجع:خصائص shape-outside في CSS

مرجع:وظيفة CSS circle()

مرجع:دالة inset() CSS

مرجع:دالة polygon() CSS