The CSS Podcast – 016: Đường viền
Trong mô-đun mô hình hộp, chúng ta đã xem xét một phép so sánh khung để mô tả từng phần của mô hình hộp.
Hộp đường viền là khung của các hộp, còn thuộc tính border
cung cấp cho bạn một loạt các tuỳ chọn để tạo khung đó theo gần như mọi kiểu mà bạn có thể nghĩ ra.
Thuộc tính đường viền
Các thuộc tính border
riêng lẻ cung cấp một 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
.
Bạn có một số lựa chọn như sau:
Khi sử dụng các 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 hiển thị để tạo độ tương phản và chiều 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 các màu tối như black
.
Trong Chrome, các kiểu đường viền này sẽ có dạng màu đồng nhất và trong Firefox, các kiểu đường viền này sẽ được làm sáng để tạo ra 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, điều quan trọng là bạn phải kiểm thử trang web của mình trên nhiều trình duyệt.
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ị các 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
.
Chữ viết tắt
Cũng như 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 phần khai báo.
.my-element {
border: 1px solid red;
}
Thứ tự 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 trên tất cả các cạnh của hộp hoặc trên từng cạnh riêng lẻ bằng border-color
.
Theo mặc định, thuộc tính 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 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, hãy sử dụng border-top-color
, border-right-color
, border-left-color
và border-bottom-color
.
Chiều rộng
Độ rộng của đường viền là độ dày của đường kẻ và được kiểm soát bởi border-width
.
Chiều rộng đường viền mặc định là medium
.
Tuy nhiên, bạn sẽ không thấy được thông tin này trừ phi bạn xác định một kiểu.
Bạn có thể sử dụng các chiều rộng được đặ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
.
Thuộc tính 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 nội tuyến, thay vì các cạnh trên, phải, dưới hoặc trái rõ ràng.
Bạn cũng có thể làm điều 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ó đường viền chấm 2px
, là màu văn bản hiện tại.
Sau đó, đường viền inline-end
được xác định là 2px
, màu đỏ và liền mạch.
Đ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ữ 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 khác nhau đối với các thuộc tính logic trong đường viền, vì vậy, hãy nhớ kiểm tra khả năng hỗ trợ trước khi sử dụng.
Bán kính đường viền
Để tạo góc bo tròn cho hộp, hãy sử dụng thuộc tính border-radius
.
.my-element {
border-radius: 1em;
}
Mã viết tắt này sẽ thêm một đường viền nhất quán vào mỗi góc của hộp.
Cũ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 theo 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 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 một góc, bạn đang sử dụng một ký hiệu 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 đ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-bên trái.
Bạn có thể xác định cả hai thuộc tính cho mỗi 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 hình tròn mặc định.
Bạn có thể xác định các giá trị này trong 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.
Điều này cho phép bạn sáng tạo và tạo 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ỉ phải 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 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 hình ảnh đó được cắt, chiều rộng hình ảnh, khoảng cách lề từ cạnh và cách lề 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
giống như border-width
: đó 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ả hiệu ứng chuyển 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
Thuộc tính border-image-slice
là một thuộc tính hữu ích cho phép bạn cắt một hình ảnh thành 9 phần, bao gồm 4 đường phân tách.
Phương thức này hoạt động giống như viết tắt margin
, trong đó bạn xác định giá trị chênh lệch trên, phải, dưới và trái.
.my-element {
border-image: url('image.jpg');
border-image-slice: 61 58 51 48;
}
Khi đã xác định các giá trị chênh lệch, 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 của chúng 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, do quá trình cắt để lại, 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 về cách bạn muốn lặp lại hình ảnh đường viền.
Phương thức này hoạt động giống như background-repeat
.
- Giá trị ban đầu là
stretch
, giúp kéo giãn 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 bớt các vùng cạnh để đạt được điều này. - Giá trị
round
giống như giá trị lặp lại, nhưng thay vì cắt bớt các vùng cạnh hình ảnh để vừa với nhiều hình ảnh nhất có thể, giá trị này sẽ kéo giãn hình ảnh cũng như lặp lại hình ảnh để đạt được hiệu ứng lặp lại liền mạch - Giá trị
space
cũng giống như giá trị lặp lại, nhưng giá trị này sẽ thêm khoảng trống giữa mỗi vùng cạnh để tạo ra một mẫu liền mạch.
Kiểm tra mức độ hiểu biết
Kiểm tra kiến thức của bạn về đường viền
Màu đường viền mặc định là màu nào?
currentColor
white
historicColor
black
.my-element { border: solid hotpink; }
Độ rộng mặc định của đường viền là bao nhiêu?
medium
solid
1px
border-inline: 1px solid
sẽ...