Thuộc tính outline trong CSS
Trần Thị Vân - 1201
- 18/07/2025
Chức năng của Thuộc tính outline trong CSS
Thuộc tính outline trong CSS dùng để kẻ đường viền nằm bên ngoài border của phần tử HTML input và textarea.
Cú pháp của Thuộc tính outline trong CSS
outline: kichthuoc kieu mau;
kichthuoc: ví dụ 1px hay 5px, quy định kích thước đường viền.
kieu: Kiểu outline như dotted, dashed, quy định loại đường viền, là những giá trị của thuộc tính outline.
mau: Màu sắc đường viền, ví dụ red, blue.
Các giá trị của Thuộc tính outline trong CSS
dotted: Đường viền hình tròn.
dashed: Đường viền nét đứt.
double: có 2 đường viền cùng màu cách nhau bởi khoảng trắng.
ridge: Đường viền phối khung màu.
solid: Đường viền nét liền.
groove: Đường viền phối khung màu nhưng ngược màu với ridge.
inset:: Chỉ định đường viền chèn 3D, phối thêm một màu so với màu được đưa vào.
outset: Chỉ định đường viền chèn 3D, phối thêm một màu so với màu được đưa vào, ngược với inset.
none: Không có đường viền và khi để chuột vào ô thì cũng không hiện đường viền gì hết.
mặc định: Mặc định không để css outline thì khi để chuột vào sẽ hiện đường viền màu xám.
initial: Đưa giá trị của thuộc tính outline về giá trị mặc định.
inherit: Kế thừa thuộc tính outline từ phần tử cha.
Code Thuộc tính outline trong CSS
outline: 5px dotted green;
outline: 4px dashed blue;
outline: 5px double green;
outline: 5px ridge green;
outline: 5px solid green;
outline: 5px groove green;
outline: 5px inset green;
outline: 5px outset green;
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính outline trong CSS</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
input{width:100%; height:35px; border:3px solid red; float:left; margin-bottom:20px}
textarea{width:100%; height:50px; border:3px solid red; float:left; margin-bottom:20px}
</style>
</head>
<body>
<h1>Code Thuộc tính outline trong CSS</h1>
<p>Dùng để kẻ đường viền nằm bên ngoài border của phần tử HTML input và textarea:</p>
<!--dotted-->
<input style="outline: 5px dotted green;" type="text" placeholder="outline: 5px dotted green;">
<textarea style="outline: 5px dotted green;" placeholder="outline: 5px dotted green;"></textarea>
<!--dashed-->
<input style="outline: 4px dashed blue;" type="text" placeholder="outline: 4px dashed blue;">
<textarea style="outline: 4px dashed blue;" placeholder="outline: 4px dashed blue;"></textarea>
<!--double-->
<input style="outline: 5px double green;" type="text" placeholder="outline: 5px double green;">
<textarea style="outline: 5px double green;" placeholder="outline: 5px double green;"></textarea>
<!--ridge-->
<input style="outline: 5px ridge green;" type="text" placeholder="outline: 5px ridge green;">
<textarea style="outline: 5px ridge green;" placeholder="outline: 5px ridge green;"></textarea>
<!--solid-->
<input style="outline: 5px solid green;" type="text" placeholder="outline: 5px solid green;">
<textarea style="outline: 5px solid green;" placeholder="outline: 5px solid green;"></textarea>
<!--groove-->
<input style="outline: 5px groove green;" type="text" placeholder="outline: 5px groove green;">
<textarea style="outline: 5px groove green;" placeholder="outline: 5px groove green;"></textarea>
<!--inset-->
<input style="outline: 5px inset green;" type="text" placeholder="outline: 5px inset green;">
<textarea style="outline: 5px inset green;" placeholder="outline: 5px inset green;"></textarea>
<!--outset-->
<input style="outline: 5px outset green;" type="text" placeholder="outline: 5px outset green;">
<textarea style="outline: 5px outset green;" placeholder="outline: 5px outset green;"></textarea>
<!--none-->
<input style="outline: none;" type="text" placeholder="outline: none;">
<textarea style="outline: none;" placeholder="outline: none;"></textarea>
<!--Không dùng outline-->
<input type="text" placeholder="Không dùng outline">
<textarea = placeholder="Không dùng outline"></textarea>
<!--initial - Đưa giá trị của thuộc tính outline về giá trị mặc định-->
<input style="outline: 5px initial green;" type="text" placeholder="outline: 5px initial green;">
<textarea style="outline: 5px initial green;" placeholder="outline: 5px initial green;"></textarea>
<!--inherit - Kế thừa thuộc tính outline từ phần tử cha-->
<input style="outline: 5px inherit green;" type="text" placeholder="outline: 5px inherit green;">
<textarea style="outline: 5px inherit green;" placeholder="outline: 5px inherit green;"></textarea>
</body>
</html>
Ứng dụng thuộc tính outline trong CSS
Không chỉ dùng để tạo đường viền bên ngoài, outline còn hữu ích khi cần làm nổi bật một phần tử mà không muốn thay đổi kích thước hoặc ảnh hưởng đến bố cục xung quanh. Trong thực tế, thuộc tính này đặc biệt phù hợp với hiệu ứng tương tác và trạng thái focus.
Tạo hiệu ứng nổi bật cho phần tử
outline có thể tạo điểm nhấn trực quan cho nút bấm, ô nhập liệu, liên kết hoặc một khu vực quan trọng trên giao diện. Vì đường viền nằm bên ngoài phần tử nên hiệu ứng này thường không làm thay đổi kích thước của phần tử như khi tăng border.
Ví dụ, có thể tạo hiệu ứng nổi bật khi người dùng di chuột vào một nút:
.button:hover {
outline: 2px solid #f4a300;
outline-offset: 3px;
}
Thuộc tính outline-offset giúp tạo khoảng cách giữa phần tử và đường outline, nhờ đó hiệu ứng dễ nhìn hơn và không bị sát vào nội dung.
Kết hợp outline với border và border-radius
outline có thể kết hợp với border để tạo nhiều lớp viền cho một phần tử. Cách này phù hợp khi muốn giữ border làm đường viền chính nhưng vẫn bổ sung một lớp nhấn ở bên ngoài.
Chẳng hạn, một khối có thể sử dụng border để định hình và outline để tạo điểm nhấn:
.box {
border: 1px solid #ddd;
border-radius: 8px;
outline: 2px solid #f4a300;
outline-offset: 4px;
}
Trong trường hợp sử dụng border-radius, cần kiểm tra trực tiếp trên giao diện vì outline không phải là một phần của box model và cách hiển thị đường bao có thể khác với border. Vì vậy, outline phù hợp hơn cho hiệu ứng nhấn mạnh bên ngoài thay vì thay thế hoàn toàn border.
Sử dụng outline cho trạng thái focus của form
Một trong những ứng dụng quan trọng nhất của outline là làm rõ phần tử đang nhận focus. Khi người dùng chuyển đến ô nhập liệu bằng bàn phím, đường outline giúp họ nhận biết chính xác vị trí đang tương tác.
input:focus {
outline: 2px solid #f4a300;
outline-offset: 2px;
}
Không nên tùy tiện xóa outline bằng outline: none nếu chưa có hiệu ứng thay thế rõ ràng. Việc giữ dấu hiệu focus giúp giao diện dễ sử dụng hơn, đặc biệt với người điều hướng bằng bàn phím.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính outline 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 *
