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 người dùng giao diện 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.

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ử ngay

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ử ngay

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ử ngay

Trong nhiều trình duyệt, <textarea> được thiết lập mặc định là có thể điều chỉnh kích thước. Ở đây, chúng ta sử dụng thuộc tính resize để tắt tính năng này:

Ví dụ

textarea {
  resize: none;
}

Thử ngay

Chỉnh dịch cân đường CSS

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

Div này có đường viền khoảng 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ử ngay

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 viền của yếu tố.
resize Điều chỉnh yếu tố có thể thay đổi kích thước bởi người dùng không.