Trong bài này, chúng ta sẽ tìm hiểu về các thuộc tính giao diện người dùng trong CSS sau:

resize
outline-offset

1. Thuộc tính resize trong CSS

Thuộc tính resize trong CSS được sử dụng để chỉ định một phần tử có thể cho phép người dùng thay đổi kích thước

Ví dụ:

See the Pen <a href="https://codepen.io/sonsonctnp/pen/WNXEqPB"> Untitled</a> by sonsonct (<a href="https://codepen.io/sonsonctnp">@sonsonctnp</a>) on <a href="https://codepen.io">CodePen</a>.

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>:

See the Pen <a href="https://codepen.io/sonsonctnp/pen/RwjZzOy"> Untitled</a> by sonsonct (<a href="https://codepen.io/sonsonctnp">@sonsonctnp</a>) on <a href="https://codepen.io">CodePen</a>.

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>:

See the Pen <a href="https://codepen.io/sonsonctnp/pen/jOaLjjN"> Untitled</a> by sonsonct (<a href="https://codepen.io/sonsonctnp">@sonsonctnp</a>) on <a href="https://codepen.io">CodePen</a>.

Trong một số trình duyệt, phần 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 resize thước để vô hiệu hóa khả năng thay đổi kích thước

Ví dụ:

See the Pen <a href="https://codepen.io/sonsonctnp/pen/eYeEqYz"> Untitled</a> by sonsonct (<a href="https://codepen.io/sonsonctnp">@sonsonctnp</a>) on <a href="https://codepen.io">CodePen</a>.

2. Thuộc tính outline-offset trong CSS

Thuộc tính outline-offset trong CSS được sử dụng để thêm khoảng cách giữa đường viền(outline) và cạnh hoặc đường viền(border) của một phần tử

Lưu ý: outline-offset khác với border! Không giống như border, outline-offset được vẽ bên ngoài border của phần tử và có thể chồng lên nội dung khác. Ngoài ra, outline-offset KHÔNG phải là một phần của các 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 outline-offset

Ví dụ:

See the Pen <a href="https://codepen.io/sonsonctnp/pen/podrMyj"> Untitled</a> by sonsonct (<a href="https://codepen.io/sonsonctnp">@sonsonctnp</a>) on <a href="https://codepen.io">CodePen</a>.