CSS offset-distance 屬性
示例
該 <img> 元素將放置在其定義的路徑上，距離路徑起點 33% 的位置。
img {
offset-path: path('M 50 80 C 150 -20 250 180 350 80');
offset-distance: 33%;
}
自己動手試一試 »
定義和用法
該 offset-distance 屬性設定了元素距離由 offset-path 屬性定義的路徑起點的距離。
瀏覽器支援
表中的數字指定了完全支援該屬性的第一個瀏覽器版本。
| 屬性 | |||||
|---|---|---|---|---|---|
| offset-distance | 55 | 79 | 72 | 16 | 42 |
CSS 語法
offset-distance: auto|value|initial|inherit;
屬性值
| 值 | 描述 |
|---|---|
| 0 | 元素放置在其路徑的起點。這是預設值。 |
| length | 指定元素距離其路徑起點的距離，單位為 px、pt、cm 等。不允許負值。閱讀長度單位 |
| % | 指定距離，相對於路徑長度的百分比。 |
| initial | 將此屬性設定為其預設值。閱讀關於initial |
| inherit | 從其父元素繼承此屬性。閱讀關於inherit |
相關頁面
HTML SVG 教程：SVG 路徑
CSS 教程：CSS 動畫
CSS offset 屬性：CSS Offset 屬性
CSS offset-anchor 屬性：CSS Offset-anchor 屬性
CSS offset-path 屬性：CSS Offset-path 屬性
CSS offset-rotate 屬性： CSS offset-rotate 屬性
