CSS offset 屬性

定義和用法

offset 屬性用于沿路徑動畫化元素，它是以下屬性的簡寫形式：

有關設置 offset 屬性值的不同方式，請參閱下方更多實例。

使用 offset 簡寫屬性為 <img> 元素設置 offset-path、offset-distance 和 offset-rotate 的屬性值：

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

使用 <img> 元素的 offset 屬性設置 offset-path 和 offset-rotate 的屬性值：

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

使用 <img> 元素的 offset 屬性設置 offset-path 和 offset-distance 的屬性值：

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

使用 <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%;
}

offset: auto|value|initial|inherit;

值	描述
auto	默認。請參閱每個單獨的 'offset-' 屬性的默認值。
offset-anchor	指定元素上固定在動畫路徑上的點。默認值為 auto。
offset-distance	指定從 offset-path 定義的路徑起點開始的距離。默認值為 0。
offset-path	指定元素動畫化的路徑。默認值為 none。
offset-position	指定元素沿路徑的初始位置。默認值為 normal。
offset-rotate	指定元素沿路徑動畫化時的旋轉角度。默認值為 auto。
initial	將此屬性設置為其默認值。參閱 initial。
inherit	從其父元素繼承此屬性。參閱 inherit。

默認值：	See the default value for the individual properties
繼承性：	否
動畫制作：	支持。請參閱：動畫相關屬性。
版本：	CSS3
JavaScript 語法：	object.style.offset="path('M 50,250 C 700,-50 -400,-50 250,250') 200px auto 90deg"

表格中的數字表示首個完全支持該屬性的瀏覽器版本。

Chrome	Edge	Firefox	Safari	Opera
55	79	72	16	42