Bài 11 – Đường biên | border CSS

Home/Học viết code/CSS/Bài 11 – Đường biên | border CSS

Đường biên – border

Đường biên – border có thể sử dụng cho nhiều mục đích. Ví dụ như để trang trí hoặc làm đường kẻ phân biệt giữa hai phần tử, CSS có thể cho bạn nhiều khả năng để sử dụng tùy theo mục đích.

Độ dày của đường biên [border-width]

Độ dày của đường biên được xác định bởi thuộc tính border-width, bạn có thể gán các trị theo tên như thin (mỏng), medium (vừa), hoặc thick (dày), các đơn vị khác  cũng được sử dụng như px. Ảnh bên dưới minh họa các thông số thường được sử dụng

figure012

Màu sắc đường biên [border-color]

figure013

Đặc tính border-color được áp dụng để định màu sắc cho border, các đơn vị giá trị bao gồm màu hệ hệ thập lục phân như FF0000, hệ màu RGB như rgb(123,123,123) hoặc mô tả tên chuẩn yellow .

Các kiểu dáng đường biên [border-style]

Có nhiều kiểu dáng khác nhau dành cho border. Dưới đây là 8 kiểu khác nhau của border kể từ phiên bản trình duyệt Internet Explorer 5.5 chấp nhận.  Ở hình minh họa border-color được gán là màu gold và border-width được gán là thick, dĩ nhiên bạn có thể định bất cứ màu sắc và độ dày khác theo mong muốn.

Giá trị được gán là none hay hidden nếu bạn không muốn có đường biên.

figure014

Các ví dụ về border

3 ví dụ dưới đây cho thấy nhiều các sử dụng đặc tính của border khác nhau được áp dụng lên các phần tử <h1>, <h2>, <ul> và <p>. Kết quả cho thấy không những các phần tử được trang trí đẹp mắt mà còn mở ra cho chúng ta những khả năng vô cùng phong phú khi áp dụng các đặc tính này:

h1 {
  border-width: thick;
  border-style: dotted;
  border-color: gold;
  }

h2 {
  border-width: 20px;
  border-style: outset;
  border-color: red;
  }

p {
  border-width: 1px;
  border-style: dashed;
  border-color: blue;
    }

ul {
  border-width: thin;
  border-style: solid;
  border-color: orange;
  }

Xem ví dụ


Nó có thể thiết lập kiểu dáng cho từng cạnh riêng biệt, ví dụ :

h1 {
  border-top-width: thick;
  border-top-style: solid;
  border-top-color: red;

  border-bottom-width: thick;
  border-bottom-style: solid;
  border-bottom-color: blue;

  border-right-width: thick;
  border-right-style: solid;
  border-right-color: green;

  border-left-width: thick;
  border-left-style: solid;
  border-left-color: orange;
  }

Xem ví dụ

Viết rút gọn [border]

Bạn có thể kết hợp nhiều đặc tính của border bằng cách viết rút gọn, ví dụ đoạn code dưới đây

p {
   border-width: 1px;
   border-style: solid;
   border-color: blue;
  }

Có thể rút gọn thành:

p { border: 1px solid blue; }

Tổng kết

Trong bài học này bạn đã được học các khả năng vô hạn các đặc tính của border, bài tiếp theo chúng ta sẽ học cách thiết lập chiều cao và rộng của mô hình hộp.

Facebook Comments
2020-09-20T11:12:55+00:00Tháng Mười Một 1, 2014|Categories: CSS|Tags: , , , |

Tác giả:

Xin chào, đây là Blog của Chung - chuyên trang tìm hiểu về ngành thiết kế web nói chung và các ngành thiết kế đồ họa liên quan. I'm a Freelance Web/Graphic Designer - Lecturer at University of Fine Arts, Hong Bang International University, Văn Lang University, Saigon University, Hong Bang International University, Nguyen Tat Thanh University.
Go to Top