Bài 9: Thuộc tính đường bao ngoài (Outline)

Posted on January 31, 2008
by Blog.thegioiwebsite.Net Học CSS |

Thuộc tính Outline sẽ vẽ một đường bao ngoài toàn bộ một phần tử HTML, đối với phần tử có đường viền (border) thì đường bao này sẽ bao trọn đường viền của phần tử đó. Cũng tương tự như đường viền bạn có thể đặt cho nó các thuộc tính về màu săc, độ lớn và kiểu.

Có một điều cần chú ý là các thuộc tính của đường bao này có thể không được hỗ trợ trên IE


01Đặt thuộc màu cho đường bao


Nếu muốn đặt màu cho đường bao chúng ta có thể sử dụng thuộc tính outline-color:

p {
outline-color: #CC0000;
}

02Đặt độ rộng cho đường bao.

Tương tự như đường viền, để đặt độ rộng cho đường bao chúng ta đặt giá trị độ lớn cho thuộc tính outline-width:

p {
outline-width: 2px;
}

03Chọn kiểu đường bao

Để chọn kiểu cho đường bao chúng ta sẽ đặt lần lượt các giá trị cho thuộc tính outline-style:


p {
outline-style: dotted;
}

STT outline-style
1 none
2 hidden
3 dotted
4 dashed
5 solid
6 double
7 groove
8 ridge
9 inset
10 outset

Để cho gọn chúng ta cũng có thể viết các giá trị của thuộc tính Outline dưới dạng shorthand như sau:

div.outline {
outline: 1px solid #000;
}


Bookmark


Comments

Leave a Reply