Đường viền CSS

Cách làm việc với đường viền trong CSS

Đường viền là một lớp mỏng giữa đệm và lề. Chỉnh sửa đường viền bạn có thể làm cho các phần tử vẽ chu vi của chúng trên màn hình.

Bạn có thể làm việc trên các đường viền bằng cách sử dụng các thuộc tính đó:

  • border-style
  • border-color
  • border-width

Bất động sảnbordercó thể được sử dụng như một cách viết tắt cho tất cả các thuộc tính đó.

border-radiusđược sử dụng để tạo ra các góc tròn.

Bạn cũng có khả năng sử dụng hình ảnh làm đường viền, một khả năng doborder-imagevà các thuộc tính riêng biệt cụ thể của nó:

  • border-image-source
  • border-image-slice
  • border-image-width
  • border-image-outset
  • border-image-repeat

Hãy bắt đầu vớiborder-style.

Kiểu viền

Cácborder-stylethuộc tính cho phép bạn chọn kiểu của đường viền. Các tùy chọn bạn có thể sử dụng là:

  • dotted
  • dashed
  • solid
  • double
  • groove
  • ridge
  • inset
  • outset
  • none
  • hidden

Kiểm traCodepen nàycho một ví dụ trực tiếp

Mặc định cho kiểu lànone, vì vậy, để làm cho đường viền xuất hiện, bạn cần thay đổi nó thành một cái gì đó khác.solidlà một lựa chọn tốt trong hầu hết thời gian.

Bạn có thể đặt một kiểu khác nhau cho mỗi cạnh bằng cách sử dụng các thuộc tính

  • border-top-style
  • border-right-style
  • border-bottom-style
  • border-left-style

hoặc bạn có thể sử dụngborder-stylevới nhiều giá trị để xác định chúng, sử dụng thứ tự Trên-Phải-Dưới-Trái thông thường:

p {
  border-style: solid dotted solid dotted;
}

Chiều rộng đường viền

border-widthđược sử dụng để thiết lập chiều rộng của đường viền.

Bạn có thể sử dụng một trong các giá trị được xác định trước:

  • thin
  • medium(giá trị mặc định)
  • thick

hoặc thể hiện một giá trị bằng pixel, em hoặc rem hoặc bất kỳ giá trị độ dài hợp lệ nào khác.

Thí dụ:

p {
  border-width: 2px;
}

Bạn có thể đặt riêng chiều rộng của từng cạnh (Trên cùng-Phải-Dưới-Trái) bằng cách sử dụng 4 giá trị:

p {
  border-width: 2px 1px 2px 1px;
}

hoặc bạn có thể sử dụng các thuộc tính cạnh cụ thểborder-top-width,border-right-width,border-bottom-width,border-left-width.

Màu viền

border-colorđược sử dụng để thiết lập màu của đường viền.

Nếu bạn không đặt màu, đường viền theo mặc định được tô màu bằng cách sử dụng màu của văn bản trong phần tử.

Bạn có thể chuyển bất kỳ giá trị màu hợp lệ nào choborder-color.

Thí dụ:

p {
  border-color: yellow;
}

Bạn có thể đặt màu của từng cạnh (Trên cùng-Phải-Dưới-Trái) riêng biệt bằng cách sử dụng 4 giá trị:

p {
  border-color: black red yellow blue;
}

hoặc bạn có thể sử dụng các thuộc tính cạnh cụ thểborder-top-color,border-right-color,border-bottom-color,border-left-color.

Thuộc tính tốc ký biên giới

3 thuộc tính đã đề cập,border-width,border-stylevàborder-colorcó thể được đặt bằng cách sử dụng thuộc tính tốc kýborder.

Thí dụ:

p {
  border: 2px black solid;
}

Bạn cũng có thể sử dụng các thuộc tính dành riêng cho cạnhborder-top,border-right,border-bottom,border-left.

Thí dụ:

p {
  border-left: 2px black solid;
  border-right: 3px red dashed;
}

Bán kính biên giới

border-radiusđược sử dụng để đặt các góc tròn thành đường viền. Bạn cần chuyển một giá trị sẽ được sử dụng làm bán kính của hình tròn sẽ được sử dụng để làm tròn đường viền.

Sử dụng:

p {
  border-radius: 3px;
}

Bạn cũng có thể sử dụng các thuộc tính dành riêng cho cạnhborder-top-left-radius,border-top-right-radius,border-bottom-left-radius,border-bottom-right-radius.

Sử dụng hình ảnh làm đường viền

Một điều rất thú vị với đường viền là khả năng sử dụng hình ảnh để tạo kiểu cho chúng. Điều này cho phép bạn sáng tạo với đường viền.

Chúng tôi có 5 tài sản:

  • border-image-source
  • border-image-slice
  • border-image-width
  • border-image-outset
  • border-image-repeat

và tốc kýborder-image. Tôi sẽ không đi vào chi tiết nhiều ở đây vì hình ảnh như đường viền sẽ cần được bao quát sâu hơn như cách tôi có thể làm trong chương nhỏ này. Tôi khuyên bạn nên đọcMục nhập nhật ký CSS Tricks trên border-imageđể biết thêm thông tin.

Tải xuống miễn phí của tôiSổ tay CSS


Các hướng dẫn css khác:


Công nghệ Wiki trực tuyến!