Thuộc tính thang đo CSS
Định nghĩa và cách sử dụng
Thuộc tính scale
cho phép bạn thay đổi kích thước của các phần tử.
Thuộc tính scale
xác định các giá trị về mức độ chia tỷ lệ của một phần tử theo hướng x và y. Bạn cũng có thể xác định mức độ chia tỷ lệ của một phần tử theo hướng z.
Giá trị tỷ lệ có thể được cung cấp dưới dạng một giá trị, hai giá trị hoặc ba giá trị.
- Nếu một giá trị được đưa ra, phần tử sẽ được chia tỷ lệ như nhau theo cả hướng x và y.
- Nếu hai giá trị được đưa ra, phần tử sẽ được chia tỷ lệ theo hướng x và y riêng lẻ.
- Nếu ba giá trị được đưa ra, phần tử sẽ được chia tỷ lệ theo hướng x, y và z riêng lẻ.
Để hiểu rõ hơn về thuộc tính scale
, hãy xem bản demo .
Lưu ý: Một kỹ thuật thay thế để chia tỷ lệ một phần tử là sử dụng thuộc tính transform
CSS với scale()
. Thuộc tính scale
CSS, như được giải thích trên trang web này, được cho là một cách đơn giản và trực tiếp hơn để chia tỷ lệ một phần tử.
Giá trị mặc định: | không có |
---|---|
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.scale="2 0.7" Hãy thử nó |
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 | |||||
---|---|---|---|---|---|
scale | 104 | 104 | 72 | 14.1 | 90 |
Cú pháp CSS
scale: x-axis y-axis z-axis |initial|inherit;
Giá trị tài sản
Property Value | Description | Demo |
---|---|---|
x-axis | Defines scale factor at the x-axis. Possible values:
|
Demo ❯ |
y-axis | Defines scale factor at the y-axis. Possible values:
|
Demo ❯ |
z-axis | Defines scale factor at the z-axis. Possible values:
|
|
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ụ
Ví dụ
Khi thuộc tính scale
được đặt với hai giá trị, kích thước được đặt riêng lẻ trên trục x và trục y. Ở đây, phần tử sẽ có kích thước gấp đôi trên trục x và một nửa kích thước trên trục y:
div {
scale: 2 50%;
}
Hãy tự mình thử »Trang liên quan
Hướng dẫn CSS: Biến đổi CSS 2D
Hướng dẫn CSS: Chuyển đổi CSS 3D
Thuộc tính xoay CSS: Thuộc tính Xoay CSS
Thuộc tính dịch CSS: Thuộc tính CSS Translate