CSS giao diện người dùng

CSS giao diện người dùng

Trong chương này, bạn sẽ học các thuộc tính giao diện người dùng CSS sau:

  • resize
  • outline-offset

Hỗ trợ trình duyệt

Số trong bảng chỉ ra phiên bản trình duyệt đầu tiên hỗ trợ hoàn toàn thuộc tính này.

Thuộc tính Chrome IE Firefox Safari Opera
resize 4.0 Không hỗ trợ 5.0 4.0 15.0
outline-offset 4.0 15.0 5.0 4.0 9.5

CSS Điều chỉnh kích thước

resize Thuộc tính này quy định phần tử có nên (và cách nào) được người dùng điều chỉnh kích thước hay không.

Phần tử div này có thể được người dùng điều chỉnh kích thước!

Điều chỉnh kích thước: Nhấp và kéo góc dưới phải của phần tử div này.

Lưu ý:Internet Explorer không hỗ trợ thuộc tính resize.

Ví dụ này chỉ cho phép người dùng điều chỉnh chiều rộng của phần tử <div>:

ví dụ

div {
  resize: horizontal;
  overflow: auto;
}

Thử nghiệm trực tiếp

Ví dụ này chỉ cho phép người dùng điều chỉnh chiều cao của phần tử <div>:

ví dụ

div {
  resize: vertical;
  overflow: auto;
}

Thử nghiệm trực tiếp

Ví dụ này cho phép người dùng điều chỉnh chiều cao và chiều rộng của phần tử <div>:

ví dụ

div {
  resize: both;
  overflow: auto;
}

Thử nghiệm trực tiếp

Trong nhiều trình duyệt, <textarea> mặc định có thể điều chỉnh kích thước. Ở đây, chúng ta sử dụng thuộc tính resize để vô hiệu hóa tính năng này:

ví dụ

textarea {
  resize: none;
}

Thử nghiệm trực tiếp

Chỉnh位移 kết cấu CSS

outline-offset Thuộc tính này thêm khoảng cách giữa đường viền và mép của phần tử.

div này có đường viền轮廓 15px bên ngoài mép viền.

Lưu ý:Đường viền khác với viền! Khác với viền, đường viền轮廓 được vẽ bên ngoài viền của phần tử và có thể chồng lên nội dung khác. Đồng thời, đường viền cũng không phải là một phần của 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 độ rộng của đường viền.

Dưới đây là ví dụ sử dụng thuộc tính outline-offset để thêm khoảng cách giữa 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;
}

Thử nghiệm trực tiếp

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:

Thuộc tính Mô tả
outline-offset Thêm khoảng trống giữa viền và cạnh của phần tử.
resize Điều chỉnh kích thước của phần tử có thể được người dùng điều chỉnh.