Đường viền

Podcast CSS – 016: Borders

Trong mô-đun box model, chúng tôi đã xem xét hình ảnh tương tự khung để mô tả từng phần của mô hình hộp.

Hộp viền là khung của các hộp, và các thuộc tính border cung cấp cho bạn rất nhiều lựa chọn để tạo khung đó gần như mọi phong cách mà bạn có thể nghĩ đến.

Thuộc tính đường viền

Các thuộc tính border riêng lẻ cung cấp cách tạo kiểu cho nhiều phần của đường viền.

Phong cách

Để đường viền xuất hiện, bạn phải xác định border-style. Có một vài lựa chọn:

Khi sử dụng kiểu ridge, inset, outset và groove, trình duyệt sẽ làm tối màu đường viền cho màu thứ hai được hiển thị để mang lại độ tương phản và độ sâu. Hành vi này có thể khác nhau giữa các trình duyệt, đặc biệt là đối với màu tối như black. Trong Chrome, các kiểu đường viền này sẽ có dạng đồng nhất và trong Firefox, chúng sẽ được làm sáng để có màu thứ hai đậm hơn.

Hành vi của trình duyệt cũng có thể khác nhau đối với các kiểu đường viền khác, vì vậy, bạn nên thử nghiệm trang web của mình trên các trình duyệt khác nhau. Một ví dụ phổ biến về sự khác biệt này là cách mỗi trình duyệt hiển thị kiểu dotted và dashed.

Để đặt kiểu đường viền ở mỗi cạnh của hộp, bạn có thể sử dụng border-top-style! border-right-style, border-left-style, và border-bottom-style.

Viết tắt

Tương tự như với margin và padding, bạn có thể sử dụng border thuộc tính viết tắt để xác định tất cả các phần của đường viền trong một nội dung khai báo.

.my-element {
    border: 1px solid red;
}

Thứ tự của các giá trị trong viết tắt border là border-width, border-style, sau đó là border-color.

Màu

Bạn có thể đặt màu ở tất cả các cạnh của hộp hoặc trên mỗi mặt bằng border-color. Theo mặc định, hộp này sử dụng màu văn bản hiện tại của hộp: currentColor. Điều này có nghĩa là nếu bạn chỉ khai báo thuộc tính đường viền, như chiều rộng, màu sẽ là giá trị được tính toán trừ phi bạn đặt giá trị đó một cách rõ ràng.

.my-element {
    color: blue;
    border: solid; /* Will be a blue border */
}

.my-element {
    color: blue;
    border: solid yellow;
}

Để đặt màu đường viền ở mỗi cạnh của hộp, sử dụng border-top-color! border-right-color, border-left-color và border-bottom-color.

Chiều rộng

Chiều rộng của đường viền là độ dày của đường và được kiểm soát bằng border-width. Chiều rộng đường viền mặc định là medium. Bạn sẽ không nhìn thấy tên này trừ phi bạn xác định một kiểu. Bạn có thể sử dụng chiều rộng khác được đặt tên như thin và thick.

Các thuộc tính border-width cũng chấp nhận đơn vị độ dài như px, em, rem hoặc %. Để đặt chiều rộng đường viền ở mỗi cạnh của hộp, hãy sử dụng border-top-width! border-right-width, border-left-width và border-bottom-width.

Thuộc tính logic

Trong Thuộc tính logic, bạn đã tìm hiểu cách tham chiếu đến luồng khối và luồng nội tuyến, thay vì chỉ rõ các bên trên, bên phải, dưới cùng hoặc bên trái.

Bạn cũng có khả năng này với đường viền:

.my-element {
    border: 2px dotted;
    border-inline-end: 2px solid red;
}

Trong ví dụ này, .my-element có tất cả các mặt được xác định là có 2px, đường viền chấm là màu văn bản hiện tại. Đường viền inline-end theo đó được xác định là 2px, đồng nhất và màu đỏ. Điều này có nghĩa là trong các ngôn ngữ đọc từ trái sang phải (như tiếng Anh) đường viền màu đỏ sẽ nằm ở bên phải của hộp. Bằng các ngôn ngữ viết từ phải sang trái (như tiếng Ả Rập) đường viền màu đỏ sẽ nằm ở bên trái của hộp.

Khả năng hỗ trợ trình duyệt rất đa dạng đối với các thuộc tính logic ở biên giới, Vì vậy, hãy nhớ kiểm tra dịch vụ hỗ trợ trước khi sử dụng.

Bán kính đường viền

Để tạo cho hộp các góc tròn, hãy sử dụng Thuộc tính border-radius.

.my-element {
    border-radius: 1em;
}

Viết tắt này thêm đường viền nhất quán vào mỗi góc của hộp. Giống như các thuộc tính đường viền khác, bạn có thể xác định bán kính đường viền cho mỗi cạnh bằng border-top-left-radius! border-top-right-radius, border-bottom-right-radius và border-bottom-left-radius.

Bạn cũng có thể chỉ định bán kính của mỗi góc bằng cách viết tắt, theo thứ tự: trên cùng bên trái, trên cùng bên phải, dưới cùng bên phải rồi đến dưới cùng bên trái.

.my-element {
    border-radius: 1em 2em 3em 4em;
}

Bằng cách xác định một giá trị duy nhất cho góc, bạn đang sử dụng một cách viết tắt khác vì bán kính đường viền được chia thành hai phần: theo chiều dọc và chiều ngang. Điều này có nghĩa là khi đặt border-top-left-radius: 1em, bạn đang đặt bán kính trên cùng bên trái trên cùng và bán kính trên cùng bên trái trái.

Bạn có thể xác định cả hai thuộc tính, theo từng góc như sau:

.my-element {
    border-top-left-radius: 1em 2em;
}

Thao tác này sẽ thêm giá trị border-top-left-top là 1em, và giá trị border-top-left-left là 2em. Điều này sẽ chuyển đổi bán kính đường viền trên cùng bên trái thành bán kính hình elip, thay vì bán kính tròn mặc định.

Bạn có thể xác định các giá trị này bằng cách viết tắt border-radius, sử dụng / để xác định các giá trị hình elip, sau các giá trị tiêu chuẩn. Tính năng này giúp bạn thoả sức sáng tạo và tạo ra một số hình dạng phức tạp.

.my-element {
    border: 2px solid;
  border-radius: 95px 155px 148px 103px / 48px 95px 130px 203px;
}

Đường viền hình ảnh

Bạn không chỉ cần sử dụng đường viền dựa trên nét vẽ trong CSS. Bạn cũng có thể sử dụng bất kỳ loại hình ảnh nào, sử dụng border-image. Thuộc tính viết tắt này cho phép bạn đặt hình ảnh nguồn, hình ảnh đó được cắt như thế nào, chiều rộng của hình ảnh, khoảng cách đường viền được tách ra từ cạnh và cách đường viền phải lặp lại.

.my-element {
  border-image-source: url(https://assets.codepen.io/174183/border-image-frame.jpg);
  border-image-slice: 61 58 51 48;
  border-image-width: 20px 20px 20px 20px;
  border-image-outset: 0px 0px 0px 0px;
  border-image-repeat: stretch stretch;
}

border-image-width có dạng border-width: đây là cách bạn đặt chiều rộng của hình ảnh đường viền. border-image-outset cho phép bạn đặt khoảng cách giữa hình ảnh đường viền và hộp mà nó bao bọc xung quanh.

border-image-source

border-image-source (nguồn của hình ảnh đường viền) có thể là url cho mọi hình ảnh hợp lệ, bao gồm cả các dải màu CSS.

.my-element {
    border-image-source: url('path/to/image.png');
}

.my-element {
    border-image-source: linear-gradient(to bottom, #000, #fff);
}

border-image-slice

border-image-slice thuộc tính là một thuộc tính hữu ích cho phép bạn cắt hình ảnh thành 9 phần, được tạo thành từ 4 dòng chia đôi. Giá trị này hoạt động giống như cú pháp viết tắt margin, trong đó bạn xác định giá trị bù trên cùng, bên phải, dưới cùng và bên trái.

.my-element {
    border-image: url('image.jpg');
    border-image-slice: 61 58 51 48;
}

Với các giá trị bù trừ được xác định, Bây giờ bạn có 9 phần của hình ảnh: 4 góc, 4 cạnh và phần ở giữa. Các góc được áp dụng cho các góc của phần tử có hình ảnh đường viền. Các cạnh được áp dụng cho các cạnh của phần tử đó. border-image-repeat xác định cách các cạnh đó lấp đầy không gian và border-image-width thuộc tính này kiểm soát kích thước của lát cắt.

Cuối cùng, từ khoá fill xác định xem phần giữa (bên trái theo lát cắt) có được dùng làm hình nền của phần tử hay không.

border-image-repeat

border-image-repeat là cách bạn hướng dẫn CSS cách bạn muốn hình ảnh đường viền lặp lại. Hàm này hoạt động giống như background-repeat.

• Giá trị ban đầu là stretch, nhằm kéo dài hình ảnh nguồn để lấp đầy không gian có sẵn nếu có thể.
• Giá trị repeat xếp kề các cạnh của hình ảnh nguồn nhiều lần nhất có thể, và có thể cắt các vùng cạnh để đạt được mục tiêu này.
• Giá trị round giống với lặp lại, nhưng thay vì cắt bớt các vùng cạnh của hình ảnh cho vừa với nhiều kích thước nhất có thể, tác vụ này sẽ kéo dài hình ảnh cũng như lặp lại hình ảnh để lặp lại liền mạch
• Giá trị space được lặp lại, tương tự như lặp lại, nhưng giá trị này sẽ thêm khoảng trống giữa từng vùng cạnh để tạo mẫu liền mạch.

Kiểm tra kiến thức

Kiểm tra kiến thức về biên giới

.my-element {
  border: solid hotpink;
}