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ảnborder
có 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-image
và 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-style
thuộ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.solid
là 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-style
vớ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-style
vàborder-color
có 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:
- Hướng dẫn Flexbox
- Hướng dẫn về CSS Grid
- Biến CSS (Thuộc tính tùy chỉnh)
- Giới thiệu về PostCSS
- Thuộc tính lề CSS
- Cách căn giữa một phần tử bằng CSS
- Phông chữ Hệ thống CSS
- Cách in HTML của bạn với phong cách
- Hướng dẫn giới thiệu về Chuyển đổi CSS
- Hướng dẫn tạo ảnh động CSS
- Giới thiệu về CSS
- Hướng dẫn CSS
- Cách thiết lập Tailwind với PurgeCSS và PostCSS
- Tờ Tailwind Cheat
- Cách xoay liên tục hình ảnh bằng CSS
- Tạo bảng phản hồi bằng CSS
- Cách gỡ lỗi CSS bằng cách chia đôi
- Bộ chọn CSS
- Xếp tầng CSS
- Đặc tính CSS
- Bộ chọn thuộc tính CSS
- Màu sắc CSS
- Đơn vị CSS
- Url CSS ()
- Kiểu chữ CSS
- Mô hình hộp CSS
- Thuộc tính vị trí CSS
- Truy vấn phương tiện CSS và thiết kế đáp ứng
- Truy vấn tính năng CSS
- Chuyển đổi CSS
- Cách tạo kiểu danh sách bằng CSS
- Tiền tố nhà cung cấp CSS
- Kế thừa CSS
- Lớp giả CSS
- Phần tử giả CSS
- Tạo kiểu bảng HTML bằng CSS
- Thuộc tính Hiển thị CSS
- Hàm calc () CSS
- Đường viền CSS
- Nhập tệp CSS bằng @import
- Xử lý lỗi CSS
- Bộ lọc CSS
- Kích thước hộp CSS
- Nền CSS
- Nhận xét CSS
- Phông chữ CSS
- CSS Padding
- Thuộc tính float CSS và thanh toán bù trừ
- Chuẩn hóa CSS
- Thuộc tính CSS z-index
- Cách tắt lựa chọn văn bản bằng CSS
- Cách đặt một mục ở dưới cùng của vùng chứa bằng CSS
- Cách đảo màu bằng CSS
- Các thẻ pre đáp ứng trong CSS
- Nhúng video YouTube thích ứng
- Giá trị Điểm ngắt CSS tốt cho Thiết kế đáp ứng là gì?
- Cách căn giữa trong flexbox