ویژگی offset CSS

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

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

از عناصر <img> استفاده کنید offset تنظیم مقادیر ویژگی offset-path و offset-rotate:

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

آزمایش کنید

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

از عناصر <img> استفاده کنید 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

از عناصر <img> استفاده کنید 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

ارجاع به:ویژگی offset CSS

ارجاع به:ویژگی offset-anchor CSS

ارجاع به:ویژگی offset-distance CSS

ارجاع به:ویژگی offset-path CSS

ارجاع به:ویژگی offset-position CSS

ارجاع به:ویژگی offset-rotate CSS