Thuộc tính khoảng cách offset CSS
Ví dụ
Phần tử <img> được đặt trên đường dẫn đã xác định của nó, ở khoảng cách 33% so với điểm bắt đầu của đường dẫn.
img {
offset-path: path('M 50 80 C 150 -20 250 180 350 80');
offset-distance: 33%;
}
Hãy tự mình thử »Định nghĩa và cách sử dụng
Thuộc tính offset-distance
đặt khoảng cách của một phần tử từ điểm bắt đầu của đường dẫn được xác định bởi thuộc tính offset-path
.
Giá trị mặc định: | 0 |
---|---|
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: | đối tượng .style.offsetDistance="200px" Hãy dùng 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-distance | 55.0 | 79.0 | 72.0 | Not supported | 42.0 |
Cú pháp CSS
offset-distance: auto| value |initial|inherit;
Giá trị tài sản
Value | Description |
---|---|
0 | The element is placed at the start of its path. This is default. |
length | Specifies the elements distance from the start of its path in px, pt, cm, etc. Negative values are not allowed. Read about length units |
% | Specifies the distance in percent relative to the lenth of the path. |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
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: Thuộc tính CSS Offset
Thuộc tính CSS offset-anchor: Thuộc tính CSS Offset-anchor
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