Dàn ý - Thủ thuật CSS | CSS Almanac 2025

Các outlinebất động sản trong CSS vẽ một đường xung quanh bên ngoài của một phần tử. Nó tương tự như đường viền ngoại trừ điều đó:

Nó luôn xoay quanh tất cả các mặt, bạn không thể chỉ định các mặt cụ thể
Nó không phải là một phần của mô hình hộp, vì vậy nó sẽ không ảnh hưởng đến vị trí của phần tử hoặc các phần tử liền kề (tốt cho việc gỡ lỗi!)

Các thông tin nhỏ khác bao gồm việc nó không tôn trọng bán kính đường viền (tôi cho là hợp lý vì nó không phải là đường viền) và nó không phải lúc nào cũng hình chữ nhật. Ví dụ: nếu đường viền bao quanh một phần tử nội tuyến với các kích thước phông chữ khác nhau, Opera sẽ vẽ một hộp so le xung quanh tất cả.

Nó thường được sử dụng vì lý do trợ năng, để nhấn mạnh một liên kết khi được gắn thẻ vào mà không ảnh hưởng đến vị trí và theo một cách khác với di chuột.

a:focus ( outline: 1px dashed red; )

Tốc ký

outline: ( || || ) | inherit

Nó có các thuộc tính giống như đường viền, nhưng thay vào đó là "outline-".

Cách viết tắt ở trên có thể được viết:

a:focus ( outline-width: 1px; outline-style: dashed; outline-color: red; )

Ghi chú

Bạn không thể đặt đường viền chỉ trên một (hoặc hai hoặc ba) mặt của một phần tử. Tất cả các bên chỉ. Không có những điều như outline-top, outline-right, outline-bottom, hoặc outline-leftnhư có với border.
Hãy thử mở bảng điều khiển trên bất kỳ trang web nào và chạy document.head.insertAdjacentHTML("beforeend", "* ( outline: 1px solid red; )");- bạn sẽ thấy rất nhiều trang web cấu trúc theo cách đó.
outlineđược sử dụng cho các :focuskiểu theo mặc định. Hãy nhớ rằng nếu bạn từng xóa các outlinekiểu, chẳng hạn như a:focus ( outline: 0; ), bạn cần thêm lại chúng bằng cách sử dụng một số kiểu khác biệt trực quan khác.