Thuộc tính offset-position CSS
- Trang trước offset-path
- Trang tiếp theo offset-rotate
Định nghĩa và cách sử dụng
offset-position
Thuộc tính chỉ định vị trí ban đầu của yếu tố trên đường dẫn.
Nếu offset-path
Nếu hàm không chỉ định vị trí bắt đầu của chính nó, thì offset-position
giá trị quyết định vị trí ban đầu của yếu tố khi di chuyển theo đường dẫn di chuyển.
Mô hình
Ví dụ 1
Vị trí ban đầu của yếu tố được chỉ định nên là góc phải dưới:
#square { width: 60px; height: 60px; background: blue; offset-position: bottom right; offset-path: ray(45deg); }
Ví dụ 2
Xem các vị trí bắt đầu của hiệu ứng di chuyển khác nhau:
#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); }
Cú pháp CSS
offset-position: auto|normal|position|initial|inherit;
Giá trị thuộc tính
Giá trị | Mô tả |
---|---|
normal | Đặt vị trí bắt đầu của hiệu ứng di chuyển về 50% 50% của khung chứa. Giá trị mặc định. |
auto | Đặt vị trí bắt đầu của hiệu ứng di chuyển về góc trên cùng bên trái của khung phần tử. |
position |
Định nghĩa một tọa độ x/y, đặt phần tử so với cạnh khung của nó. Có thể sử dụng từ 1 đến 4 giá trị để định nghĩa vị trí. |
initial | Đặt thuộc tính này về giá trị mặc định. Xem thêm initial. |
inherit | Kế thừa thuộc tính này từ phần tử cha. Xem thêm inherit. |
Chi tiết kỹ thuật
Giá trị mặc định: | normal |
---|---|
Kế thừa: | Không |
Hoạt hình: | Hỗ trợ. Xem thêm:Thuộc tính liên quan đến hoạt hình. |
Phiên bản: | CSS3 |
Cú pháp JavaScript: | object.style.offsetPosition="auto" |
Hỗ trợ trình duyệt
Số liệu 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 |
---|---|---|---|---|
116 | 116 | 122 | 16 | 102 |
Trang liên quan
Hướng dẫn:SVG Path
Hướng dẫn:CSS Animation
Tham khảo:Thuộc tính offset CSS
Tham khảo:Thuộc tính offset-anchor CSS
Tham khảo:Thuộc tính offset-distance CSS
Tham khảo:Thuộc tính offset-path CSS
Tham khảo:Thuộc tính offset-rotate CSS
- Trang trước offset-path
- Trang tiếp theo offset-rotate