Đặc Tính Outline trong CSS

Đặc Tính Outline trong CSS được sử dụng để định dạng đường viền bao bên ngoài và làm nổi bật phần tử. Hãy tham khảo bài học CSS dưới đây của Mytour để hiểu chi tiết về Đặc Tính Outline trong CSS.

1. Đặc Tính Outline trong CSS

Các đặc tính Outline trong CSS bao gồm:

- Đặc tính kiểu đường outline
- Đặc tính màu sắc của đường outline
- Đặc tính độ rộng của đường outline
- Đặc Tính Outline Rút Gọn
- Đặc tính độ dịch chuyển của đường outline

1.1 Kiểu của đường outline trong CSS

Thuộc tính kiểu của đường outline trong CSS xác định style và hình dạng của đường viền. Các giá trị của thuộc tính này có thể là:

Dấu chấm - Đường viền outline có hình dạng dấu chấm.

Nét đứt - Đường viền outline có hình dạng nét đứt.

solid - đường viền outline được vẽ liền.

double -

groove - đường viền outline hiển thị như rãnh 3D.

ridge - xác định đường viền cho đường chóp.

inset - xác định đường viền cho bóng bên trong.

outset - xác định đường viền cho bóng bên ngoài.

none -không có đường viền nào hiển thị.

hidden - xác định đường viền bị ẩn đi.

Ví dụ:

Kết quả xuất hiện như sau:

1.2 Thuộc tính outline-color

Thuộc tính outline-color được sử dụng để thiết lập màu sắc cho đường viền bao bên ngoài.

Giá trị màu sắc được đặt bởi:

- Tên: chỉ định tên của một màu cụ thể, ví dụ như đỏ.

- Hex: chỉ định giá trị hex, ví dụ như #ff0000.

- RBG: chỉ định giá trị RBG, ví dụ như rgb(255,0,0).

- Đảo ngược: tạo màu sắc ngược nhau.

Ví dụ 1:

Ví dụ dưới đây áp dụng 4 màu sắc độc đáo cho 4 đường viền:

Kết quả xuất hiện như sau:

Ví dụ 2:

Ví dụ sau minh họa việc sử dụng outline-color: invert để tạo màu sắc đảo ngược.

Kết quả hiển thị như sau:

1.3 Thuộc tính outline-width

Thuộc tính độ rộng của đường outline xác định kích thước của đường bao. Các lựa chọn bao gồm:

- Mảnh (thường là 1px)

- Trung bình (thường là 3px)

- Dày (thường là 5px)

- Kích thước cụ thể (đơn vị px, pt, cm, em, ...)

Ví dụ:

Kết quả xuất hiện như dưới đây:

1.4 Thuộc tính outline rút gọn

Thuộc tính outline rút gọn tự động đặt tất cả các thuộc tính sau trong một khai báo:

- Độ rộng của đường outline.

- Kiểu của đường outline (bắt buộc).

- Màu sắc của đường outline.

Ví dụ:

Kết quả xuất hiện như bên dưới:

1.5 Thuộc tính outline-offset

Thuộc tính outline-offset xác định khoảng cách giữa đường bao outline và vùng hoặc đường viền của phần tử.

Ví dụ:

Kết quả xuất hiện như bên dưới:

1.6. Thuộc tính Outline trong CSS

Dưới đây là bảng danh sách các thuộc tính Outline trong CSS:

Bài học CSS này của Mytour đã giới thiệu về các thuộc tính Outline trong CSS. Trong những bài học tiếp theo, Mytour sẽ tiếp tục giới thiệu về cách điều chỉnh kích thước trong CSS.