Giao diện người dùng CSS
Giao diện người dùng CSS
Trong chương này, bạn sẽ tìm hiểu về các thuộc tính giao diện người dùng CSS sau:
-
resize -
outline-offset
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 | |||||
|---|---|---|---|---|---|
| resize | 4.0 | 79.0 | 5.0 | 4.0 | 15.0 |
| outline-offset | 4.0 | 15.0 | 5.0 | 4.0 | 9.5 |
Thay đổi kích thước CSS
Thuộc tính resize chỉ định xem (và cách thức) một phần tử có thể được người dùng thay đổi kích thước hay không.
Người dùng có thể thay đổi kích thước phần tử div này!
Để thay đổi kích thước: Nhấp và kéo góc dưới cùng bên phải của phần tử div này.
Ví dụ sau cho phép người dùng chỉ thay đổi kích thước chiều rộng của phần tử <div>:
Ví dụ sau cho phép người dùng chỉ thay đổi kích thước chiều cao của phần tử <div>:
Ví dụ sau cho phép người dùng thay đổi kích thước cả chiều cao và chiều rộng của phần tử <div>:
Trong nhiều trình duyệt, <textarea> có thể thay đổi kích thước theo mặc định. Ở đây, chúng tôi đã sử dụng thuộc tính thay đổi kích thước để tắt khả năng thay đổi kích thước:
Phần bù phác thảo CSS
Thuộc tính outline-offset thêm khoảng trống giữa đường viền và cạnh hoặc đường viền của một phần tử.
Lưu ý: Đường viền khác với đường viền! Không giống như đường viền, đường viền được vẽ bên ngoài đường viền của phần tử và có thể chồng lên nội dung khác. Ngoài ra, đường viền KHÔNG phải là một phần kích thước của phần tử; tổng chiều rộng và chiều cao của phần tử không bị ảnh hưởng bởi chiều rộng của đường viền.
Ví dụ sau sử dụng thuộc tính outline-offset để thêm khoảng cách giữa đường viền và đường viền:
Ví dụ
div.ex1 {
margin: 20px;
border:
1px solid black;
outline: 4px solid red;
outline-offset: 15px;
}
div.ex2 {
margin: 10px;
border: 1px solid black;
outline: 5px dashed blue;
outline-offset: 5px;
} Hãy tự mình thử »Thuộc tính giao diện người dùng CSS
Bảng sau liệt kê tất cả các thuộc tính giao diện người dùng:
| Property | Description |
|---|---|
| outline-offset | Adds space between an outline and the edge or border of an element |
| resize | Specifies whether or not an element is resizable by the user |
