Thuộc tính bù CSS
Ví dụ
Sử dụng thuộc tính tốc ký offset để đặt các giá trị thuộc tính cho offset-path, offset-distance và offset-rotate trên phần tử <img>:
img {
offset: path('M 50 80 C 150 -20 250 180 350 80') 150px auto 45deg;
}
Hãy tự mình thử »Thêm ví dụ "Hãy tự mình thử" bên dưới.
Định nghĩa và cách sử dụng
Thuộc tính offset
được sử dụng khi tạo hoạt ảnh cho một phần tử dọc theo đường dẫn và là thuộc tính viết tắt cho các thuộc tính sau:
* hiện chỉ hoạt động trên trình duyệt Firefox
Để biết các cách khác nhau để đặt giá trị thuộc tính offset
, hãy xem "Ví dụ khác" bên dưới.
Giá trị mặc định: | Xem giá trị mặc định cho từng thuộc tính |
---|---|
Thừa hưởng: | KHÔNG |
Hoạt hình: | Đúng. Đọc về hoạt hình Hãy thử nó |
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" Hãy thử |
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính.
Property | |||||
---|---|---|---|---|---|
offset | 55.0 | 79.0 | 72.0 | 16.0 | 42.0 |
Cú pháp CSS
offset: auto| value |initial|inherit;
Giá trị tài sản
Value | Description |
---|---|
auto | Default. See default value for each individual 'offset-' property. |
offset-anchor | Specifies the point on an element that is fixed to the path it is animated along. |
offset-distance | Specifies the distance from the start of the path defined by offset-path. |
offset-path | Specifies the path an element is animated along. |
offset-rotate | Specifies rotation of an element as it is animated along a path |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Thêm ví dụ
offset-path và offset-xoay
Sử dụng thuộc tính offset của phần tử <img> để đặt các 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;
}
Hãy tự mình thử »offset-path và offset-khoảng cách
Sử dụng thuộc tính offset của phần tử <img> để đặt các 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;
}
Hãy tự mình thử »offset-path, offset-distance, offset-rotate và offset-anchor
Sử dụng thuộc tính offset của phần tử <img> để đặt các giá trị thuộc tính offset-path, offset-distance, offset-rotate và offset-anchor:
Lưu ý: ví dụ này hiện chỉ hoạt động với trình duyệt Firefox do thuộc tính offset-anchor.
img {
offset: path('M 50 80 C 150 -20 250 180 350 80') 150px -90deg / 0% 50%;
}
Hãy tự mình thử »Trang liên quan
Hướng dẫn SVG HTML: Đường dẫn SVG
Hướng dẫn CSS: Hoạt hình CSS
Thuộc tính CSS offset-anchor: Thuộc tính CSS Offset-anchor
Thuộc tính khoảng cách bù đắp CSS: Thuộc tính khoảng cách bù đắp CSS
Thuộc tính đường dẫn bù đắp CSS: Thuộc tính đường dẫn bù đắp CSS
Thuộc tính xoay offset của CSS: Thuộc tính CSS Offset-rotate