Bài 11: Outline trong CSS

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

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