CSS offset الخاصية

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

offset تستخدم الخاصية لتحريك العناصر عبر المسار، وهي شكل مختصر للعديد من الخصائص التالية:

• offset-anchor
• offset-distance
• offset-path
• offset-position
• offset-rotate

بالنسبة لضبط offset للتعرف على الطرق المختلفة لضبط قيم الخصائص، يرجى الرجوع إلى الأمثلة أدناه.

مثال

مثال 1

استخدام offset خصائص مختصرة لضبط قيم offset-path و offset-distance و offset-rotate الخاصه بـ <img> عنصر:

img {
  offset: path('M 50 80 C 150 -20 250 180 350 80') 150px auto 45deg;
}

جرب بنفسك

مثال 2: offset-path و offset-rotate

استخدام offset ضبط قيم خصائص offset-path و offset-rotate:

img {
  offset: path('M 50 80 C 150 -20 250 180 350 80') 45deg;
}

جرب بنفسك

مثال 3: offset-path و offset-distance

استخدام offset ضبط قيم خصائص offset-path و offset-distance:

img {
  offset: path('M 50 80 C 150 -20 250 180 350 80') 150px;
}

جرب بنفسك

مثال 4: offset-path،offset-distance،offset-rotate و offset-anchor

استخدام offset قيم الخاصية التي يتم تعيينها لخصائص offset-path،offset-distance،offset-rotate و offset-anchor:

img {
  offset: path('M 50 80 C 150 -20 250 180 350 80') 150px -90deg / 0% 50%;
}

جرب بنفسك

صيغة CSS

offset: auto|value|initial|inherit;

قيمة الخاصية

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

دعم المتصفح

الرقم في الجدول يعني إصدار المتصفح الذي يدعم الخاصية بشكل كامل لأول مرة.

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

دروس:مسار SVG

دروس:رسوميات CSS

المرجع:CSS offset الخاصية

المرجع:CSS offset-anchor الخاصية

المرجع:CSS offset-distance الخاصية

المرجع:CSS offset-path الخاصية

المرجع:CSS offset-position الخاصية

المرجع:CSS offset-rotate الخاصية