CSS offset-position รายละเอียด

หน้าก่อน offset-path
หน้าต่อไป offset-rotate

คำอธิบายและวิธีใช้

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;

属性值

值	描述
normal	将偏移起始位置设置为包含块的 50% 50%。默认值。
auto	将偏移起始位置设置为元素框的左上角。
position	指定一个 x/y 坐标，将元素相对于其框边缘放置。可以使用 1 到 4 个值来定义位置。
initial	将此属性设置为其默认值。参阅 initial。
inherit	从其父元素继承此属性。参阅 inherit。

技术细节

默认值：	normal
继承性：	否
动画制作：	支持。请参阅：动画相关属性。
版本：	CSS3
JavaScript 语法：	object.style.offsetPosition="auto"