Podcast CSS – 016: Đường viền
Trong mô-đun mô hình hộp, chúng tôi đã xem xét một mô hình tương tự khung để mô tả từng phần của mô hình hộp.
Hộp đường viền là khung của hộp và các thuộc tính border cung cấp cho bạn một loạt tuỳ chọn để tạo khung đó theo hầu hết mọi kiểu 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 các 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 để bạn 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 hiển thị thứ hai để 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 đối với các màu tối như black.
Trong Chrome, các kiểu đường viền này sẽ trông có vẻ ổn định và trong Firefox, chúng sẽ được làm sáng để sau đó có màu thứ hai đậm hơn.
Hành vi của trình duyệt cũng có thể thay đổi đối với các kiểu đường viền khác, vì vậy, bạn cần kiểm tra 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 thuộc tính viết tắt border để 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 và sau đó là border-color.
Màu
Bạn có thể đặt màu ở mọi cạnh của hộp hoặc từng cạnh riêng lẻ bằng border-color.
Theo mặc định, trường 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 các thuộc tính đường viền, chẳng hạn như chiều rộng, thì màu sắc sẽ là giá trị đã được tính toán đó trừ phi bạn đặt 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, hãy 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 viền và do border-width kiểm soát.
Chiều rộng đường viền mặc định là medium.
Tuy nhiên, điều này sẽ không hiển thị trừ phi bạn xác định một kiểu.
Bạn có thể sử dụng các chiều rộng đã đặt tên khác như thin và thick.
Các thuộc tính border-width cũng chấp nhận đơn vị chiều 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.
Tính chất logic
Trong mô-đun Thuộc tính logic, bạn đã tìm hiểu cách tham chiếu đến luồng khối và luồng cùng dòng, thay vì các cạnh rõ ràng trên cùng, bên phải, dưới cùng hoặc bên trái.
Bạn cũng có thể sử dụng tính 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 cạnh được xác định là có 2px, đường viền chấm là màu văn bản hiện tại.
Sau đó, đường viền inline-end được xác định là 2px, đồng nhất và có màu đỏ.
Điều này có nghĩa là đối với 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.
Đối với các ngôn ngữ đọc 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 sẽ khác nhau đối với các thuộc tính logic về đường viền, vì vậy, hãy đảm bảo bạn kiểm tra khả năng hỗ trợ trước khi sử dụng.
Bán kính đường viền
Để bo tròn các góc, hãy dùng thuộc tính border-radius.
.my-element {
border-radius: 1em;
}
Viết tắt này giúp tạo đường viền nhất quán cho từng góc của hộp.
Tương tự 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 từng góc bằng cách viết ngắn gọn 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;
}
Khi 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: cạnh dọc và cạnh ngang.
Điều này có nghĩa là khi đặt border-top-left-radius: 1em, bạn sẽ đặ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 bên trái.
Bạn có thể xác định cả hai thuộc tính cho 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.
Thao tác 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ị chuẩn.
Nhờ vậy, bạn có thể 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;
}
Hình ảnh đường viền
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ể dùng bất kỳ loại hình ảnh nào bằng cách 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, cách cắt lát hình ảnh, chiều rộng hình ảnh, khoảng cách giữa đường viền so với cạnh và cách 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;
}
Thuộc tính 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.
Thuộc tính 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à hình ảnh đường viền bao quanh.
border-image-source
border-image-source (nguồn của hình ảnh đường viền) có thể là url cho bất kỳ hình ảnh hợp lệ nào, bao gồm cả các màu chuyển tiếp 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
Thuộc tính border-image-slice là một thuộc tính hữu ích cho phép bạn chia hình ảnh thành 9 phần, gồm 4 đường phân tách.
Giá trị này hoạt động giống như cách viết tắt của margin, trong đó bạn xác định giá trị bù trừ trên cùng, 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ị độ lệch đã xác định,
bạn hiện có 9 phần của hình ảnh: 4 góc, 4 cạnh và một 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ử đó.
Thuộc tính border-image-repeat xác định cách các cạnh đó lấp đầy không gian và thuộc tính border-image-width kiểm soát kích thước của các lát cắt.
Cuối cùng, từ khoá fill xác định liệu phần ở giữa (bị cắt từ phần 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 lặp lại hình ảnh đường viền.
Cách này giống như background-repeat.
- Giá trị ban đầu là
stretch. Giá trị này sẽ kéo dài hình ảnh nguồn để lấp đầy không gian có sẵn khi có thể. - Giá trị
repeatsẽ xếp 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 viền để đạt được mục tiêu này. - Giá trị
roundgiống như chế độ lặp lại, nhưng thay vì cắt các vùng cạnh hình ảnh cho vừa nhất có thể, giá trị này kéo dài hình ảnh và lặp lại để lặp lại liền mạch. - Giá trị
spacecũng giống như lặp lại, nhưng giá trị này tăng thêm khoảng trống giữa mỗi vùng cạnh để tạo một mẫu liền mạch.
Kiểm tra mức độ hiểu biết của bạn
Kiểm tra kiến thức của bạn về biên giới
Màu đường viền mặc định là màu nào?
blackwhitecurrentColortext-color đã tính toán và là màu đường viền mặc định.historicColor.my-element {
border: solid hotpink;
}
Chiều rộng mặc định của đường viền là bao nhiêu?
1pxmediumsolidborder-style, không phải giá trị border-width.border-inline: 1px solid sẽ...
border-block sẽ ở trên cùng và dưới cùng.