CSS Outlines là một phần quan trọng trong thiết kế giao diện người dùng, giúp làm nổi bật các thành phần (elements) trên trang web. Thuộc tính outline có nhiều điểm tương đồng với thuộc tính border, nhưng chúng cũng có những khác biệt quan trọng. Bài viết này sẽ giúp bạn hiểu rõ cách sử dụng thuộc tính outline qua các ví dụ minh họa.

1. CSS Outline là gì?

CSS Outline là một đường viền được vẽ xung quanh một phần tử để làm nổi bật nó mà không ảnh hưởng đến cách bố trí (layout) của phần tử. Khác với border, outline không chiếm không gian trong bố cục và không ảnh hưởng đến các phần tử xung quanh.

  • Không ảnh hưởng đến layout: Outline không làm thay đổi kích thước hoặc vị trí của phần tử.
  • Không cần thuộc về box model: Outline không phải là một phần của box model (hộp chứa nội dung, padding, border, và margin).

Cú pháp của outline:

css
element {
    outline: <outline-width> <outline-style> <outline-color>;
}

Ví dụ:

html
Thử online
<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .outlined {
            outline: 3px solid red;
            margin: 10px;
            padding: 20px;
        }
    </style>
    <title>CSS Outline Example - codetuthub.com</title>
</head>
<body>
    <div class="outlined">Đây là một phần tử với outline.</div>
</body>
</html>

Trong ví dụ trên, phần tử div được bao quanh bởi một đường outline màu đỏ, dày 3px.

2. Các thuộc tính trong CSS Outline

CSS cung cấp nhiều thuộc tính liên quan đến outline để bạn có thể tùy chỉnh chúng theo nhiều cách khác nhau. Dưới đây là những thuộc tính cơ bản.

2.1. Thuộc tính outline-style

Thuộc tính outline-style xác định kiểu của outline (giống với cách hoạt động của border-style). Có nhiều giá trị khác nhau mà bạn có thể sử dụng:

  • solid: Đường nét liền (đặc).
  • dashed: Đường nét đứt.
  • dotted: Đường chấm chấm.
  • double: Đường đôi.
  • groove: Đường rãnh.
  • ridge: Đường gờ.
  • inset: Đường nổi bật vào trong.
  • outset: Đường nổi bật ra ngoài.
  • none: Không có outline.

Ví dụ outline-style:

html
Thử online
<div class="outlined" style="outline-style: dashed;">Outline nét đứt</div>
<div class="outlined" style="outline-style: dotted;">Outline chấm chấm</div>
<div class="outlined" style="outline-style: solid;">Outline nét liền</div>

2.2. Thuộc tính outline-color

outline-color xác định màu của outline. Bạn có thể sử dụng tên màu, mã màu HEX, RGB, hoặc HSL.

Ví dụ outline-color:

html
Thử online
<style>
.outline-red {
    outline-color: red;
}
.outline-blue {
    outline-color: #0000FF;
}
</style>
<div class="outlined outline-red">Outline màu đỏ</div>
<div class="outlined outline-blue">Outline màu xanh</div>

2.3. Thuộc tính outline-width

outline-width xác định độ dày của outline. Bạn có thể sử dụng các giá trị:

  • thin, medium, thick: Độ dày mỏng, trung bình và dày.
  • Đơn vị kích thước như px, em, rem, v.v.

Ví dụ outline-width:

html
Thử online
<style>
.outline-thin {
    outline-width: 1px;
}
.outline-thick {
    outline-width: 5px;
}
</style>
<div class="outlined outline-thin">Outline mỏng 1px</div>
<div class="outlined outline-thick">Outline dày 5px</div>

2.4. Thuộc tính outline-offset

outline-offset xác định khoảng cách giữa outline và phần tử (tách rời outline khỏi phần tử). Điều này hữu ích khi bạn muốn tạo hiệu ứng đặc biệt.

Ví dụ outline-offset:

html
Thử online
<style>
.outline-offset-example {
    outline: 2px solid red;
    outline-offset: 10px;
}
</style>
<div class="outlined outline-offset-example">Outline cách 10px từ phần tử</div>

3. Sự khác biệt giữa outline và border

Mặc dù outline và border có vẻ tương tự nhau, nhưng chúng có một số khác biệt quan trọng:

Thuộc tínhBorderOutline
Ảnh hưởng đến layoutCóKhông
Có thể tròn góc (radius)CóKhông
Nằm trong box modelCóKhông
Tương tác với shadow (bóng)CóKhông

Ví dụ so sánh border và outline:

html
Thử online
<div style="border: 2px solid blue; padding: 20px;">Có border</div>
<div style="outline: 2px solid red; padding: 20px;">Có outline</div>

Kết quả là đường border màu xanh ảnh hưởng đến layout của phần tử, trong khi outline màu đỏ thì không.

4. Ứng dụng của CSS Outlines

4.1. Làm nổi bật phần tử đang được focus

Outlines rất hữu ích trong việc làm nổi bật phần tử khi chúng được người dùng chọn hoặc focus, đặc biệt trong các form nhập liệu.

css
input:focus {
    outline: 2px dashed green;
}

4.2. Tạo hiệu ứng trực quan khi hover

Bạn có thể sử dụng outline để tạo hiệu ứng khi người dùng di chuột qua phần tử.

css
.button:hover {
    outline: 3px solid orange;
    outline-offset: 5px;
}

4.3. Tăng cường accessibility (truy cập dễ dàng)

Trong thiết kế giao diện web, outline là một công cụ tuyệt vời để giúp những người sử dụng bàn phím dễ dàng nhận biết vị trí focus. Điều này tăng cường khả năng truy cập cho trang web.

5. Lời kết

CSS Outline là một công cụ hữu ích để làm nổi bật các phần tử mà không ảnh hưởng đến cách bố trí của trang web. Nó rất hữu ích khi cần tạo các hiệu ứng trực quan như focus, hover, hoặc làm nổi bật nội dung quan trọng.

Hãy thử nghiệm với các thuộc tính outline để tìm ra cách sử dụng phù hợp nhất với dự án của bạn trên Codetuthub.com!