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

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

Thứ hai, 18 Tháng 8 2008 15:30 Hữu Trung Hướng dẫn lập trình HTML – CSS
Email In

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

Nguồn: cssyeah.com

  1. Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: