Phác thảo một hệ thống lưới
Phác thảo đơn giản là các dòng kẻ được vẽ quanh một phần tử, bao gói nội dung phần tử, không
gian padding và border. Không giống các borders, một phác thảo không thêm bất cứ thứ gì vào
width và height của đối tượng, nó chỉ ra phạm vi của phần tử trên trang được duyệt.
Witdth của dòng kẻ được sử dụng trong phác thảo được định nghĩa bởi đặc tính outline-width
sau:
outline-width: value;
nơi value được thể hiện bằng một trong những đơn vị độ dài CSS, hay với từ khoá thin, medium
và thick.
Line color được thiết lập sử dụng đặc tính outline-color.
outline-color: color;
nơi color là tên hay giá trị màu CSS.
Cuối cùng, thiết kế của dòng kẻ có thể được thiết lập sử dụng đặc tính outline-style sau:
outline-style: style;
nơi style là none (để không hiển thị outline), solid (cho một dòng đơn), double, dotted, dash,
groove, inset, ridge hay outset.
Tất cả các đặc tính outline styles có thể được kết hợp thành đặc tính ngắn outline:
outline: width style color;
nơi width, style, và color là các giá trị cho width, style và color của dòng kẻ. Ví dụ, quy tắc
style sau sử dụng cái chọn wildcard cùng với đặc tính ngắn outline để vẽ một dòng kẻ 1px dotted green
quanh mọi phần tử trên trang web:
* {
outline: 1px dotted green;
}
Chú ý rằng không có styles outline riêng rẽ cho lề left, right, top hay bottom của đối tượng. Outline
luôn bao quanh toàn bộ phần tử.
Outlines cũng có thể áp dụng cho các phần tử nội dòng như các ảnh nội dòng, citations, quotations, và text
italicized.