وظيفة 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 naɗi

منبع:CSS shape-outside هدایتگه

منبع:CSS circle() فونكشن

منبع:函数 inset() CSS

منبع:函数 polygon() CSS