توابع circle() در CSS

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

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 {
  width: 100px;
  height: 100px;
  background-color: coral;
  color: green;
  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 در موقعیت)

جزئیات فنی

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

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

صفحات مرتبط

ارجاع:ویژگی clip-path CSS

ارجاع:ویژگی shape-outside CSS

ارجاع:توابع ellipse() در CSS

ارجاع:توابع inset() CSS

ارجاع:توابع polygon() CSS