Bài 11: Outline trong CSS


Outline là gì?

Outline là một đường được vẽ xung quanh các phần tử, BÊN NGOÀI của đường viền, để làm cho phần tử “nổi bật”.

CSS có các thuộc tính Outline dưới đây:

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

Chú ý: Outline khác với border (đường viền). Không giống border, outline được vẽ bên ngoài border của phần tử, và có thể chồng lấp nội dung khác. Ngoài ra, 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 kiểu Outline trong CSS

Thuộc tính outline-style xác định kiểu của outline, Có các kiểu như sau:

  • dotted – Xác định outline kiểu chấm
  • dashed – Xác định outline kiểu nét đứt
  • solid – Xác định outline kiểu nét liền
  • double – Xác định outline kiểu đường viền kép
  • groove – Xác định outline 3D kiểu groove (hiệu ứng phụ thuộc vào giá trị màu)
  • ridge – Xác định outline 3D kiểu ridge (hiệu ứng phụ thuộc vào giá trị màu)
  • inset – Xác định outline 3D kiểu inset (hiệu ứng phụ thuộc vào giá trị màu)
  • outset – Xác định outline 3D kiểu outset (hiệu ứng phụ thuộc vào giá trị màu)
  • none – Xác định không có outline
  • hidden – Xác định 1 outline ẩn

Ví dụ sau đây cho thấy các outline-stylegiá trị khác nhau:

Ví dụ


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;}

Chú ý: Các thuộc tính outline khác sẽ không bị ảnh hưởng, trừ khi thuộc tính outline-style được thiết lập.

Màu Outline trong CSS

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

Màu có thể được thiết lập bởi:

  • name – xác định tên màu, ví dụ màu đỏ là “red”
  • RGB – xác định một giá trị RGB, như “rgb(255,0,0)”
  • Hex – xác định 1 giá trị hex, như “#ff0000”
  • invert – Thực hiện đảo ngược màu (đảm bảo có thể nhìn thấy outline, bất kể màu nền)

Ví dụ sau đây cho thấy một số outline với màu sắc khác nhau. Chú ý các phần tử này có 1 border màu đen mảnh bên trong outline.

Ví dụ


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

p.ex2 {
  border: 1px solid black;
  outline-style: double;
  outline-color: green;
}

p.ex3 {
  border: 1px solid black;
  outline-style: outset;
  outline-color: yellow;
}

Ví dụ phía dưới sử dụng outline-color: invert, thực hiện đảo ngược màu. Điều này đảm bảo rằng outline có thể nhìn thấy, không quan tâm tới màu nền.

Ví dụ


p.ex1 {
  border: 1px solid yellow;
  outline-style: solid;
  outline-color: invert;
}

Chiều rộng Outline trong CSS

Thuộc tínhoutline-width xác định chiều rộng của outline, Nó có thể có 1 trong các giá trị dưới đây:

  • thin (mỏng, thường là 1px)
  • medium (trung bình, thường là 3px)
  • thick (dày, thường là 5px)
  • Một giá trị cụ thể (tính bằng px, pt, cm, em, etc)

Ví dụ sau đây cho thấy một số outline với độ rộng khác nhau:

Ví dụ


p.ex1 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
  outline-width: thin;
}

p.ex2 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
  outline-width: medium;
}

p.ex3 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
  outline-width: thick;
}

p.ex4 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
  outline-width: 4px;
}


CSS Outline – Thuộc tính viết nhanh

Thuộc tính outline là 1 thuộc tính viết nhanh để thiết lập các thuộc tính outline riêng biệt sau đây:

  • outline-width
  • outline-style (cần thiết)
  • outline-color

Thuộc tính outline xác định 1, 2 hoặc 3 giá trị thuộc tính bên trên. Thứ tự các giá trị không quan trọng.

Ví dụ sau đây cho thấy 1 vài outline với thuộc tính outline viết nhanh:


p.ex1 {outline: dashed;}
p.ex2 {outline: dotted red;}
p.ex3 {outline: 5px solid yellow;}
p.ex4 {outline: thick ridge pink;}


CSS Outline Offset

Thuộc tínhoutline-offset thêm khoảng không gian vào giữa outline và border của một phần tử. Khoảng không gian này là trong suốt.

Ví dụ dưới đây xác định khoảng không gian thêm vào giữa outline và border là 15px.

Ví dụ


p {
  margin: 30px;
  background: yellow;
  border: 1px solid black;
  outline: 1px solid red;
  outline-offset: 15px;
}


Ví dụ trên cho thấy khoảng không gian giữa phần tử với outline là trong suốt.

Có thể bạn sẽ thích…

Để lại một bình luận