Thuộc tính outline-offset trong CSS
Bùi Tấn Lực - 832
- 11/10/2025
Chức năng của Thuộc tính outline-offset trong CSS
Thuộc tính outline-offset trong CSS dùng để quy định khoảng cách của đường viền ngoài tới thuộc tính border trong phần tử HTML input, textarea.
Cú pháp của Thuộc tính outline-offset trong CSS
outline-offset: giatri;
giatri: Giá trị để quy định khoảng cách của đường viền ngoài tới thuộc tính border trong phần tử HTML (Ví dụ: 5px, 15px,.....)
Code Thuộc tính outline-offset trong CSS
outline-offset:15px;
outline-offset:5px;
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính outline-offset trong CSS</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
input{width:90%; height:35px; border:3px solid red; float:left; outline-style: dotted; outline-width:5px; outline-color:green; margin:5%; margin-bottom:20px;}
textarea{width:90%; height:50px; border:3px solid red; float:left; outline-style: dotted; outline-width:5px; outline-color:green; margin:5%; margin-bottom:20px;}
</style>
</head>
<body>
<h1>Code Thuộc tính outline-offset trong CSS</h1>
<p>Dùng để quy định khoảng cách của đường viền ngoài tới thuộc tính border trong phần tử HTML input, textarea:</p>
<!--outline-offset:15px;-->
<input style="outline-offset:15px;" type="text" placeholder="outline-offset:15px;">
<textarea style="outline-offset:15px;" placeholder="outline-offset:15px;"></textarea>
<!--outline-offset:5px;-->
<input style="outline-offset:5px;" type="text" placeholder="outline-offset:5px;">
<textarea style="outline-offset:5px;" placeholder="outline-offset:5px;"></textarea>
<!--outline-offset:1px;-->
<input style="outline-offset:1px;" type="text" placeholder="outline-offset:1px;">
<textarea style="outline-offset:1px;" placeholder="outline-offset:1px;"></textarea>
<input type="text" placeholder="">
<textarea placeholder=""></textarea>
</body>
</html>
Ứng dụng outline-offset trong thiết kế giao diện CSS
Thuộc tính outline-offset hữu ích khi cần kiểm soát vị trí của đường viền ngoài mà không làm thay đổi kích thước hoặc bố cục của phần tử. Trong giao diện thực tế, thuộc tính này thường được dùng để tạo khoảng thở cho đường viền, làm nổi bật trạng thái tương tác và xây dựng các hiệu ứng viền trực quan.
Tạo khoảng cách giữa outline và phần tử
Giá trị dương của outline-offset đẩy outline ra xa phần tử, tạo một khoảng trống giữa nội dung và đường viền. Cách này phù hợp khi đường viền quá sát cạnh khiến giao diện trở nên bí hoặc khó quan sát.
.button {
outline: 2px solid #333;
outline-offset: 4px;
}
Điểm đáng chú ý là khoảng cách này không làm tăng kích thước phần tử theo cách border thường tác động đến box model. Vì vậy, outline có thể được điều chỉnh để tạo điểm nhấn mà không cần thay đổi kích thước của nút, liên kết hoặc các thành phần giao diện khác.
Kết hợp outline-offset với :focus để làm nổi bật phần tử
outline-offset đặc biệt hữu ích khi xử lý trạng thái :focus. Khi người dùng di chuyển qua giao diện bằng bàn phím, một outline có khoảng cách hợp lý giúp nhận biết rõ phần tử đang được chọn mà vẫn giữ nguyên bố cục.
button:focus {
outline: 2px solid #333;
outline-offset: 3px;
}
Cách triển khai này phù hợp với nút bấm, liên kết, ô nhập liệu và các thành phần có thể nhận focus. Thay vì loại bỏ hoàn toàn outline mặc định, có thể tùy chỉnh vị trí và kiểu hiển thị để trạng thái focus vừa rõ ràng vừa phù hợp với thiết kế tổng thể.
Dùng outline-offset để tạo hiệu ứng viền hai lớp
Khi kết hợp outline với border, outline-offset có thể tạo cảm giác như phần tử có hai lớp viền. Đây là một cách đơn giản để tạo điểm nhấn cho nút, thẻ nội dung hoặc khu vực cần được chú ý.
.card {
border: 2px solid #333;
outline: 2px solid #999;
outline-offset: 4px;
}
Khoảng cách giữa border và outline tạo ra vùng tách biệt giúp hai đường viền không bị hòa vào nhau. Có thể điều chỉnh giá trị outline-offset để kiểm soát độ thoáng của hiệu ứng mà không phải thêm phần tử HTML phụ.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính outline-offset trong CSS.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
