Border và những điều bạn chưa biết

Giả sử rằng tôi có một thẻ <div class=”border”> với định dạng CSS như sau:

div.border {
  display: block;
  width: 1px;
  height: 1px;
  background: #FFF;
  border-top: 1px solid #F00;
  border-right: 1px solid #0F0;
  border-bottom: 1px solid #00F;
  border-left: 1px solid #000;
  overflow: hidden;
}

Các bạn có nghĩ rằng nó sẽ hiển thị giống nhau trên mọi trình duyệt hay không?

Câu trả lời của chúng ta là không, điều này có thể bạn không tin nhưng đó là một thực tế và đã được kiểm trực qua thực nghiệm. Nếu chúng ta nhìn thoáng qua thì sẽ không thấy điều đó, nhưng khi bạn có thể phóng to thẻ <div> nhiều lần thì bạn sẽ thấy điều đó. Dưới đây là một số kết quả thấy được khi xem bằng nhiều trình duyệt khác nhau.

Đôi khi những điều này lại làm chúng ta rất đau đầu trong việc fix các lỗi giữa các trình duyệt. Khi bạn gặp trường hợp thừa hoặc thiếu một pixel trên layout của bạn thì khi đó bạn hãy nhớ tới bài viết này của chúng tôi.

Chúc bạn thành công – www.ticsoft.com (Nguồn: cssyeah )

Chương 13: Border

Định dạng cho border: Định dạng cho cả 4 cạnh của đối tượng(div,span,table…)
border-width: 1px,2px,…
border-style: value
với value là 1 trong các giá trị sau:
+ none
+ hidden
+ dotted
+ dashed
+ solid
+ double
+ groove
+ ridge
+ inset
+ outset
border-color: value (các giá trị của màu)
có thể viết ngắn gọn như sau:
border: border-width border-style border-color;
ví dụ: border: 1px solid #000000;

Nếu chỉ muốn định dạng cho mỗi một cạnh
border-x: border-x-width border-x-style border-x-color;
với x l� left,top,right,bottom tương ứng cho các cạnh left,top,right,bottom
các giá trị thuộc tính của borde-x cũng giống như của border

Chúc bạn thành công – www.ticsoft.com ( TG – phpbasic)