وظيفة 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 في موقع)

تفاصيل التقنية

دعم المتصفح

الرقم في الجدول يمثل إصدار المتصفح الذي يدعم هذه الوظيفة بشكل كامل أولاً.

الصفحات ذات الصلة

مرجع:خصائص مسار القطع لـ CSS

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

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

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

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