Tạo Outline trong CSS: Thuộc tính outline trong CSS được sử dụng để tạo viền xung quanh phần tử tương tự như viền (border), nhưng viền này thường không ảnh hưởng đến không gian bên trong phần tử và không tốn diện tích.
Dưới đây là một số cách để tạo viền bằng thuộc tính outline:
- Viền Đơn (Single Outline): Điều chỉnh viền xung quanh phần tử.
css
/* Đặt viền màu đỏ với độ rộng 2px */
outline: 2px solid red;
- Viền Mờ (Dotted/Dashed Outline): Sử dụng kiểu nét đứt hoặc nét chấm để tạo viền mờ.
css
/* Đặt viền nét đứt màu xanh dương */
outline: 1px dashed blue;
/* Đặt viền nét chấm màu đỏ */
outline: 2px dotted red;
- Viền Loáng (Outline Offset): Sử dụng thuộc tính
outline-offsetđể điều chỉnh khoảng cách giữa viền và phần tử.
css
/* Đặt viền màu xanh lá cây và cách viền 10px từ phần tử */
outline: 2px solid #00cc00;
outline-offset: 10px;
- Bóng Đổ Vùng Chọn (Outline for Focus): Thường được sử dụng để tạo viền khi phần tử được chọn (ví dụ: khi người dùng click vào nút).
css
/* Đặt viền khi phần tử được focus với màu xanh và độ rộng 3px */
:focus {
outline: 3px solid #00ff00;
}
Vui lòng lưu ý rằng viền tạo bằng thuộc tính outline thường không tương tác tốt với border-radius và có thể tạo ra hiệu ứng không mong muốn trong một số trường hợp. Nó cũng thường không thể thay thế hoàn toàn viền (border) trong mọi tình huống. Điều quan trọng là hiểu rõ cách sử dụng và hạn chế của outline để đảm bảo rằng nó phù hợp với thiết kế của bạn.