1. Outline là gì ?

Outline là một đường nằm xung quanh phần tử, bên ngoài đường viền (border), có tác dụng làm nổi bật các phần tử

CSS có các thuộc tính outline sau:

  • outline-style
  • outline-color
  • outline-width
  • outline-offset
  • outline

Lưu ý: outline khác với đường viền(border). Không giống như đường viền, outline nằm bên ngoài đường viền của phần tử có thể chồng lên nội dung khác. Ngoài ra, outline không phải là một phần của các kích thước của phần tử; tổng chiều rộng và chiều cao của phần tử không bị ảnh hưởng bởi chiều rộng và chiều cao của outline

2.Các cách CSS outline

2.1 Các kiểu outline trong CSS

Ta sử dụng thuộc tính outline-style xác định kiểu của outline và có các giá trị như sau:

  • dotted – Xác định một đường viền chấm
  • dashed – Xác định đường viền đứt nét
  • solid – Xác định một đường viền liền
  • double – Xác định đường viền kép
  • groove- Xác định đường 3D có rãnh . Hiệu ứng phụ thuộc vào giá trị màu của viền
  • ridge- Xác định đường 3D. Hiệu ứng phụ thuộc vào giá trị màu của viền
  • inset- Xác định đường in 3D. Hiệu ứng phụ thuộc vào giá trị màu viền
  • outset- Xác định đường 3D ban đầu. Hiệu ứng phụ thuộc vào giá trị màu viền
  • none – Xác định không có đường viền
  • hidden – Xác định một đường viền ẩn

Ví dụ:

2.2 Cách xác định độ dày của outline trong CSS

Trong CSS, để xác định chiều rộng của outline ta sử dụng thuộc tính outline-width, ta có dùng các giá trị sau đây:

  • Môt kích thước cụ thể (px, pt, cm, em, …v.v.)
  • thinh (mỏng 1px)
  • medium (trung bình 3px)
  • thick (dày 5px)

Ví dụ:

2.3 Xác định màu của outline trong CSS

Để xác định màu sắc của outline trong CSS ta sử dụng thuộc tính outline-color

Màu sắc có thể được đặt bằng các giá trị sau đây:

  • Tên của màu – chỉ định tên của màu, ví dụ: red
  • HEX – chỉ định một giá trị HEX, ví dụ: #fff000
  • RGB – chỉ định một giá trị RGB, ví dụ: rgb(40,28,95)
  • HSL – chỉ định một giá trị HSL, ví dụ: hsl(0,50%,70%)
  • Invert – thực hiện đảo ngược màu sắc (để đảm bảo rằng outline có thể được nhìn, thấy bất kể màu nền)

Ví dụ:

2.4 Kết hợp thuộc tính

Để kết hợp các thuộc tính:

  • outline-style
  • outline-color
  • outline-width

Ta sử dụng thuộc tính outline, giá trị của nó được quy định như các thuộc tính trên và thứ tự của các giá trị không quan trọng

Ví dụ:

2.5 Phần bù của outline trong CSS

Thuộc tính outline-offset dùng để thêm khoảng trống giữa outline và đường viền(border) của một phần tử

Khoảng cách giữa một phần tử và outline là trong suốt

Ví dụ: