Mở rộng giao diện người dùng với CSS3: resize và outline-offset

CSS3 cung cấp resize (cho phép người dùng thay đổi kích thước) và outline-offset (khoảng cách outline viền).

Ví dụ mã nguồn

<!DOCTYPE html>
<html>
<head>
<style>
  div {
    margin: 20px;
    border: 1px solid rgb(0, 26, 255);
    outline: 4px dashed rgb(90, 2, 86);
    outline-offset: 15px; /* Khoảng cách giữa border và outline */
    padding: 20px;
    width: 300px;
    height: 150px;
  }
  textarea {
    display: inline-block;
    width: 300px;
    height: 100px;
    margin: 10px;
  }
</style>
</head>
<body>
<h1>Mở rộng UI: resize & outline-offset</h1>
<h3>Resize property</h3>
<textarea style="resize: none;">Textarea: Không thể resize</textarea>
<textarea>Textarea: Resizable (mặc định both)</textarea>
<textarea style="resize: horizontal;">Chỉ resize ngang</textarea>
<textarea style="resize: vertical;">Chỉ resize dọc</textarea>
<textarea style="resize: both;">Resize cả hai chiều</textarea>

<h3>Outline-offset property</h3>
<div>Div có outline-offset 15px</div>
<div style="outline-offset: 0;">Div outline-offset 0 (mặc định)</div>
<div style="outline-offset: -10px;">Div outline-offset âm (outline đè lên border)</div>
</body>
</html>

Chi tiết resize

Lưu ý

• resize chỉ hoạt động khi overflow != visible (auto, hidden, scroll)
• Có thể giới hạn kích thước min/max: min-width, max-width, min-height, max-height
• outline-offset âm làm outline đè vào border, dương đẩy ra ngoài
• Outline không chiếm diện tích layout (khác border)

Ứng dụng thực tế

• Textarea code editor cho phép resize
• Dashboard widget có thể kéo thả resize
• Focus ring tùy chỉnh với outline-offset cho accessibility
• Image cropper/resizer UI