توابع ellipse() CSS

تعریف و استفاده

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 در موقعیت)

جزئیات فنی

پشتیبانی مرورگر

اعداد در جدول نشان‌دهنده نسخه اولیه مرورگرهایی هستند که این توابع را کامل پشتیبانی می‌کنند.

صفحات مرتبط

منابع:ویژگی clip-path CSS

منابع:ویژگی shape-outside CSS

منابع:توابع دایره CSS

منابع:توابع inset() CSS

منابع:توابع polygon() CSS