Thuộc tính resize trong CSS3

Thuộc tính resize định dạng cho vùng nội dung mà người dùng có thể thay đổi được kích thước.

Cấu trúc

tag {
    resize: giá trị;
}

resize có các giá trị như sau:

Thuộc tính giá trị Ví dụ Mô tả
resize both resize: both; Người dùng có thể thay đổi cả chiều rộng và chiều cao của thành phần.
none resize: none; Người dùng không thể thay đổi thành phần theo chiều ngang.
horizontal resize: horizontal; Người dùng có thể thay đổi thành phần theo chiều thẳng đứng.
vertical resize: vertical; Người dùng có thể thay đổi chiều rộng của thành phần.

Ví dụ

HTML viết:

<html>
<head></head>
<body>
<p>Đây là vùng nội dung có thể thay đổi kích thước, giữ chuột vào phía dưới bên phải để thay
đổi.</p>
</body>
</html>

Hiển thị trình duyệt khi chưa có CSS:

Đây là vùng nội dung có thể thay đổi kích thước, giữ chuột vào phía dưới bên phải để thay đổi.

CSS viết:

p {
    border: 1px solid #cc0000;
    overflow: auto;
    resize: both;
    width: 400px;
}

Hiển thị trình duyệt khi có CSS:

Đây là vùng nội dung có thể thay đổi kích thước, giữ chuột vào phía dưới bên phải để thay đổi.

Trình duyệt hỗ trợ

Thuộc tính resize

Thuộc tính resize hỗ trợ Firefox 4 trở lên, Safari và Google Chrome.

Trình duyệt và hệ điều hành hỗ trợ

Yêu cầu phiên bản trình duyệt và hệ điều hành tối thiểu được hỗ trợ cho thuộc tính resize:

  Trình duyệt PC Smartphone - Tablets
Internet Explorer Firefox Opera Chrome Safari IOS Android Window phone
resize 9
X
4 12
X
19 5.1 5.1
X
4.0
X
7.5
X

Viết câu trả lời

Drop Images

0 Bình luận