CSS คุณสมบัติ offset-path

การระบุและการใช้งาน

offset-path คุณสมบัตินี้ใช้เพื่อสร้างเส้นทางสำหรับอนุการ์ตัวแบบ

สร้างเส้นทางสำหรับอนุการ์ <div> ของเรา

div {
  offset-path: path('M20,170 L100,20 L180,100 Z');
  animation: moveDiv 3s 3;
}
@keyframes moveDiv {
  100% { offset-distance: 100%; }
}

offset-path: none|path()|ray()|url()|basic-shape|cord-box|initial|inherit;

ค่า	รายละเอียด
none	ค่าเริ่มต้น
path()	กำหนดเส้นทางด้วยการใช้ภาษา SVG สำหรับเส้นทางSVG หลักทาง.
ray()	กำหนดเส้นทางด้วยฟังก์ชัน ray() ของ CSS
url()	กำหนดเส้นทางด้วย URL ของไฟล์ SVG
<basic-shape>	กำหนดเส้นทางด้วยฟังก์ชัน CSS (เช่น inset()、circle()、ellipse() หรือ polygon()) ในการกำหนดรูปทรงพื้นฐานเพื่อกำหนดเส้นทาง
<coord-box>	กำหนดเส้นทางด้วยกรอบตำแหน่ง
initial	ตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้น initial.
inherit	ทำให้คุณสมบัตินี้นำมาจากตัวปลูกของของมันโดยสืบทอด inherit.

ค่าเริ่มต้น:	none
การสืบทอด:	ไม่
การสร้างอนุการ์:	สนับสนุนคุณสมบัติที่เกี่ยวข้องกับอนุการ์.
รุ่น:	CSS3
ระบบแสดงทางการเขียน JavaScript:	object.style.offsetPath="path('M20,170 L100,20 L180,100 Z')"