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ấmdashed
– Xác định outline kiểu nét đứtsolid
– Xác định outline kiểu nét liềndouble
– Xác định outline kiểu đường viền képgroove
– 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ó outlinehidden
– Xác định 1 outline ẩn
Ví dụ sau đây cho thấy các outline-style
giá 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;}
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.