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

การระบุและวิธีใช้

offset attribute ใช้ในการอนิมาติวาสดุตามเส้นทาง มันเป็นรูปแบบย่อของ attribute ต่อไปนี้:

• offset-anchor
• offset-distance
• offset-path
• offset-position
• offset-rotate

เกี่ยวกับการตั้งค่า offset วิธีต่างๆ ของค่าของ attribute กรุณาดูตัวอย่างเพิ่มเติมด้านล่าง。

ตัวอย่าง

ตัวอย่าง 1

ใช้ offset ตั้งค่าค่าของ offset-path และ offset-distance และ offset-rotate ของ属性 <img> ในรูปแบบย่อ:

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

ลองด้วยตัวเอง

ตัวอย่าง 2: offset-path และ offset-rotate

ใช้องค์ประกอบ <img> ดังนี้ offset ตั้งค่าค่าของ offset-path และ offset-rotate ของ属性:

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

ลองด้วยตัวเอง

ตัวอย่าง 3: offset-path และ offset-distance

ใช้องค์ประกอบ <img> ดังนี้ offset ตั้งค่าค่าของ offset-path และ offset-distance ของ属性:

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

ลองด้วยตัวเอง

ตัวอย่างที่ 4: offset-path, offset-distance, offset-rotate และ offset-anchor

ใช้องค์ประกอบ <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%;
}

ลองด้วยตัวเอง

การเขียน CSS

offset: auto|value|initial|inherit;

ค่าคุณสมบัติ

รายละเอียดเทคนิค

การสนับสนุนบราวเซอร์

ตัวเลขในตารางแสดงเวอร์ชันบราวเซอร์ที่สนับสนุนคุณสมบัตินี้เต็มที่。

เพจที่เกี่ยวข้อง

คู่มือ：SVG พาธ

คู่มือ：CSS อนิมาชั่น

อ้างอิง：CSS offset รายละเอียด

อ้างอิง：CSS offset-anchor รายละเอียด

อ้างอิง：CSS offset-distance รายละเอียด

อ้างอิง：CSS offset-path รายละเอียด

อ้างอิง：CSS offset-position รายละเอียด

อ้างอิง：CSS offset-rotate รายละเอียด