Thuộc tính offset CSS

Định nghĩa và cách sử dụng

offset Thuộc tính được sử dụng để hoạt hình phần tử theo đường dẫn, nó là dạng viết tắt của các thuộc tính sau:

Về việc thiết lập offset Cách thiết lập giá trị thuộc tính khác nhau của thuộc tính, xin xem thêm các ví dụ bên dưới.

Sử dụng offset Thuộc tính viết tắt để thiết lập giá trị offset-path, offset-distance và offset-rotate cho phần tử <img>:

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

Sử dụng phần tử <img> để offset Thiết lập giá trị thuộc tính offset-path và offset-rotate:

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

Sử dụng phần tử <img> để offset Thiết lập giá trị thuộc tính offset-path và offset-distance:

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

Sử dụng phần tử <img> để offset Giá trị thuộc tính của thuộc tính offset-path, offset-distance, offset-rotate và offset-anchor:

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

offset: auto|value|initial|inherit;

Giá trị	Mô tả
auto	Mặc định. Xem thêm giá trị mặc định của từng thuộc tính 'offset-' riêng lẻ.
offset-anchor	Đ指定 điểm cố định trên đường dẫn của phần tử. Giá trị mặc định là auto.
offset-distance	Đ指定 khoảng cách từ điểm bắt đầu của đường dẫn được định nghĩa bởi offset-path. Giá trị mặc định là 0.
offset-path	Đ指定 đường dẫn mà phần tử sẽ di chuyển trong animation. Giá trị mặc định là none.
offset-position	Đ指定 phần tử ban đầu ở vị trí nào trên đường dẫn. Giá trị mặc định là normal.
offset-rotate	Đ指定 định độ quay của phần tử khi di chuyển theo đường dẫn. Giá trị mặc định là auto.
initial	Đặt thuộc tính này về giá trị mặc định. Xem thêm initial.
inherit	Thừa kế thuộc tính này từ phần tử cha. Xem thêm inherit.

Giá trị mặc định:	Xem giá trị mặc định cho từng thuộc tính cá nhân
Kế thừa:	Không
Chế tạo animation:	Hỗ trợ. Xem thêm:Thuộc tính liên quan đến animation.
Phiên bản:	CSS3
Cú pháp JavaScript:	object.style.offset="path('M 50,250 C 700,-50 -400,-50 250,250') 200px auto 90deg"

Số trong bảng biểu thị phiên bản trình duyệt đầu tiên hỗ trợ thuộc tính này hoàn toàn.

Chrome	Edge	Firefox	Safari	Opera
55	79	72	16	42