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
Màu đường viền mặc định là gì?
currentColor
historicColor
white
black
.my-element { border: solid hotpink; }
Chiều rộng mặc định của đường viền là bao nhiêu?
solid
medium
1px
border-inline: 1px solid
sẽ...