Khóa học CSS - Bài 09 – Outline

Quay về MỤC LỤC TỰ HỌC CSS

1. CSS Outline là gì?

Là đường viền xung quanh border, làm cho phần tử HTML nổi bật.

Các giá trị của thuộc tính outline như sau:

· outline-style

· outline-color

· outline-width

· outline-offset

· outline

2. Kiểu Outline

Giống như thuộc tính border-style, thuộc tính outline-style cũng có các giá trị sau:

· Dotted

· Dashed

· Solid

· Double

· Groove

· Ridge

· Inset

· Outset

· None

· Hidden

3. Màu sắc Outline

Thuộc tính outline-color có thể là các dạng giá trị sau:

· Tên – ví dụ “red”

· Mã RGB – ví dụ: rgb(255,0,0)

· Mã hex – ví dụ: #ff0000

· invert – đảo màu so với màu nền (tùy trình duyệt hỗ trợ)

4. Bề rộng Outline

Thuộc tính outline-width có thể có các giá trị sau:

· Thin

· Medium

· Thick

· Giá trị pixel

5. Viết tắt

Ta có thể viết tắt 03 thuộc tính outline-width, outline-style, outline-color cùng lúc.

Trong đó, thuộc tính outline-style là bắt buộc.

Ví dụ:

div {outline: 5px solid yellow;}

6. Outline Offset

Thuộc tính outline-offset là khoảng cách giữa đường outline và đường viền border/ cạnh của phần tử HTML.

Khoảng cách này là trong suốt.

Ví dụ:

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

Nếu vẫn chưa rõ các bạn xem thêm video clip sau:

Quay về MỤC LỤC TỰ HỌC CSS

Tác giả: #drM

Nguồn: Sưu Tầm