Thuộc tính outline trong CSS - Fedu

CHÀO MỪNG BẠN ĐẾN VỚI THƯ VIỆN HỌC TẬP & ĐÀO TẠO CƠ BẢN

Thuộc tính outline trong CSS

Thuộc tính outline trong CSS xác định định dạng, màu sắc và độ rộng của vùng outline (bao ngoài). Một outline là một đường kẻ bao quanh các phần tử (bên ngoài đường viền) để tạo phần tử “nổi bật”.

Tuy nhiên, thuộc tính outline khác với thuộc tính border – outline không phải là một phần 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 của outline.

Định dạng outline

Thuộc tính outline-style xác định định dạng của outline. Thuộc tính này có các giá trị như sau:

  • dotted: xác định đường outline dạng dotted
  • dashed: xác định outline dạng dashed
  • solid: xác định outline dạng solid
  • double: xác định đường outline kép
  • groove: xác định outline 3D dạng grooved. Hiệu ứng này phụ thuộc vào giá trị outline-color
  • ridge: xác định outline 3D dạng ridge. Hiệu ứng này phụ thuộc vào giá trị outline-color
  • inset: xác định outline 3D dạng inset. Hiệu ứng này phụ thuộc vào giá trị outline-color
  • outset: xác định 3D dạng outset. Hiệu ứng này phụ thuộc vào giá trị outline-color
  • none: xác định không có outline
  • hidden: xác định outline bị ẩn

Ví dụ dưới đây thiết lập một đường viền mỏng xung quanh mỗi phần tử <p>, sau đó hiện các giá trị outline-style khác nhau.

p {
    border: 1px solid black;
    outline-color: red;
}

p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}

Kết quả là:

Màu sắc của outline

Thuộc tính outline-color được sử dụng để thiết lập màu cho outline. Màu được đặt bởi:

  • name: xác định tên màu, như “red” (màu đỏ)
  • RGB: xác định giá trị RGB, như “rgb(255,0,0)”
  • Hex – xác định giá trị hex, giống “#ff0000”
  • invert – thực hiện đảo ngược màu (đảm bảo outline có thể nhìn thấy được, bất kể việc thiết lập màu nền như nào)
p {
    border: 1px solid black;
    outline-style: double;
    outline-color: red;
}

Kết quả là:

Chiều rộng của outline

Thuộc tính outline-width xác định chiều rộng của outline. Chiều rộng có thể được thiết lập theo đơn vị đo kích thước như px, pt, cm, em… hoặc sử dụng một trong ba giá trị như thin, medium hoặc thick.

p {border: 1px solid black;}

p.one {
    outline-style: double;
    outline-color: red;
    outline-width: thick;
}

p.two {
    outline-style: double;
    outline-color: green;
    outline-width: 3px;
}

Kết quả như sau:

Viết gọn thuộc tính outline

Để viết gọn CSS, bạn có thể gộp các thuộc tính của outline trên một dòng mã duy nhất. Thuộc tính outline có thể được viết theo các giá trị:

  • outline-width
  • outline-style (bắt buộc)
  • outline-color
p {
    border: 1px solid black;
    outline: 5px dotted red;
}

Kết quả như sau:

Tất cả các thuộc tính outline trong CSS

Thuộc tính Mô tả
outline thiết lập thuộc tính outline trong một khai báo
outline-color thiết lập màu của outline
outline-offset xác định khoảng cách giữa một outline và vùng hoặc đường biên của phần tử
outline-style thiết lập định dạng cho outline
outline-width thiết lập chiều rộng của outline