Vùng bao trong CSS

Các thuộc tính CSS về vùng bao

Một vùng bao (outline) là một đường bao quanh một phần tử - nằm ngoài đường viền (border). Outline có thể được sử dụng để làm cho một phần tử "nổi bật".

Các thuộc tính CSS về outline xác định kiểu (style), màu sắc và chiều rộng của outline.

Phần tử này có một đường viền mỏng màu xanh lá cây và một outline dạng các chấm rộng 10px và màu đỏ.

CSS về outline

Một vùng bao (outline) là đường bao xung quanh các phần tử (nằm bên ngoài đường viền (border)) dùng để làm cho các phần tử "nổi bật".

Tuy nhiên, các thuộc tính về vùng bao thì khác so với đường biên - vùng bao KHÔNG phải là một phần các cạnh của một phần tử; Chiều rộng và chiều cao tổng thể của phần tử không bị ảnh hưởng bởi chiều rộng của vùng bao.

Kiểu của vùng bao

Thuộc tính outline-style xác định kiểu (style) của vùng bao.

Thuộc tính outline-style có thể có một trong những giá trị sau:

·         dotted - vùng bao là các chấm tách rời

·         dashed - vùng bao là các nét đứt

·         solid - vùng bao là nét liền

·         double - vùng bao là nét đôi

·         groove - vùng bao 3D xẻ rãnh. Hiệu ứng phụ thuộc vào outline-color

·         ridge - vùng bao 3D dạng tròn nổi. Hiệu ứng phụ thuộc vào outline-color

·         inset - vùng bao 3D dạng khung chìm. Hiệu ứng phụ thuộc vào outline-color

·         outset - vùng bao 3D dạng khung nổi. Hiệu ứng phụ thuộc vào outline-color

·         none - không có vùng bao

·         hiden - vùng bao ẩn

Ví dụ sau trước tiên đặt một đường viền mỏng màu đỏ bao quanh mỗi phần tử <p>, sau đó nó hiển thị các dạng vùng bao khác nhau theo outline-style:

p  {border: 1px solid red;}

p.dotted {outline-style: dotted solid;}

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

Lưu ý: Không có thuộc tính outline CSS KHÁC được mô tả dưới đây sẽ có BẤT KỲ tác dụng trừ n tính outline-style được thiết lập!

Chiều rộng của vùng bao

Thuộc tính outline-width chỉ định chiều rộng của vùng bao (outline).

Chiều rộng có thể được thiết lập với một con số cụ thể (trong px, pt, cm, em, v.v.) hoặc sử dụng một trong ba giá trị được định nghĩa sẵn: thin, medium hoặc thick.

p  {border: 1px solid red;}

p.one {

outline-style: solid;

outline-width: thick;

}

p.two {

outline-style: solid;

outline-width: 5px;

}

Try it yourself »

Màu sắc của vùng bao

Thuộc tính outline-color được sử dụng để thiết lập màu sắc của vùng bao (outline).

Màu sắc có thể được thiết lập theo:

·         Tên - chỉ định cụ thể tên màu sắc (bằng tiếng Anh), ví dụ "red"

·         RGB - chỉ định một giá trị RGB, ví dụ "rgb(255,0,0)"

·         Hex - chỉ định một giá trị hexa, ví dụ "#ff0000"

·         invert - thực hiện đảo ngược màu sắc (đảm bảo rằng vùng bao là nhìn thấy được, bất kể màu nền)

p  {

border: 1px solid red;

outline-style: solid;

outline-color: lime;

}

Try it yourself »

Vùng bao - Thuộc tính rút gọn

Để làm mã ngắn gọn, chúng ta có thể để xác định tất cả các thuộc tính của một vùng bao bằng một thuộc tính.

Thuộc tính outline là thuộc tính rút gọn cho các thuộc tính sau đây:

·         outline-width

·         outline-style (bắt buộc)

·         outline-color

p {

outline: 5px dotted lime;

}

Try it yourself »

Tự làm bài tập!

Exercise 1 » Exercise 2 » Exercise 3 »

Tất cả các thuộc tính CSS dành cho vùng bao

Thuộc tính	Mô tả
outline	Thiết lập tất cả các thuộc tính vùng bao (outline) trong một mô tả (declaration
outline-color	Thiết lập màu sắc cho một vùng bao
outline-offset	Xác định không gian giữa một vùng bao và cạnh hoặc đường viền của một phầ
outline-style	Thiết lập kiểu (style) cho một vùn bao
outline-width	Thiết lập độ rộng cho một vùng bao