CSS offset-position 屬性

定義和用法

offset-position 屬性指定元素在路徑上的初始位置。

如果 offset-path 函數未指定其自身的起始位置，則 offset-position 的值決定了元素在沿偏移路徑移動時的初始位置。

實例

例子 1

指定元素的初始位置應為右下角：

#square {
  width: 60px;
  height: 60px;
  background: blue;
  offset-position: bottom right;
  offset-path: ray(45deg);
}

親自試一試

例子 2

查看不同的偏移起始位置：

#square1 {
  width: 40px;
  height: 40px;
  background: pink;
  text-align:center;
  offset-position: bottom right;
  offset-path: ray(45deg);
}
#square2 {
  width: 40px;
  height: 40px;
  background: red;
  text-align:center;
  offset-position: top right;
  offset-path: ray(25deg);
}
#square3 {
  width: 40px;
  height: 40px;
  background: yellow;
  text-align:center;
  offset-position: normal;
  offset-path: ray(45deg);
}
#square4 {
  width: 40px;
  height: 40px;
  background: cyan;
  text-align:center;
  offset-position: auto;
  offset-path: ray(95deg);
}
#square5 {
  width: 40px;
  height: 40px;
  background: lavender;
  text-align:center;
  offset-position: 30% 70%;
  offset-path: ray(120deg);
}

親自試一試

CSS 語法

offset-position: auto|normal|position|initial|inherit;

屬性值

技術細節

瀏覽器支持

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

相關頁面

教程：SVG 路徑

教程：CSS 動畫

參考：CSS offset 屬性

參考：CSS offset-anchor 屬性

參考：CSS offset-distance 屬性

參考：CSS offset-path 屬性

參考：CSS offset-rotate 屬性