Tailwind cho phép bạn áp dụng có điều kiện các lớp tiện ích ở các trạng thái khác nhau bằng cách sử dụng các công cụ sửa đổi biến thể. Ví dụ: sử dụng hover:border-dotted
để chỉ áp dụng tiện ích border-dotted
khi di chuột
Để biết danh sách đầy đủ tất cả các công cụ sửa đổi trạng thái có sẵn, hãy xem tài liệu về Hover, Focus và Other States
Bạn cũng có thể sử dụng các công cụ sửa đổi biến thể để nhắm mục tiêu các truy vấn phương tiện như điểm ngắt phản hồi, chế độ tối, chuyển động giảm ưu tiên, v.v. Ví dụ: sử dụng md:border-dotted
để áp dụng tiện ích border-dotted
chỉ ở kích thước màn hình trung bình trở lên
Thuộc tính border
là một cú pháp tốc ký trong CSS chấp nhận nhiều giá trị để vẽ một đường bao quanh phần tử mà nó được áp dụng cho
.box {
border: 3px solid red;
height: 200px;
width: 200px;
}
cú pháp
border: || ||
giá trị
Thuộc tính border
chấp nhận một hoặc nhiều giá trị sau kết hợp
border-width
. Chỉ định độ dày của đường viền- Một giá trị số được đo bằng đơn vị
px
,em
,rem
,vh
vàvw
0. Tương đương vớiborder: || ||
1border: || ||
2. Tương đương vớiborder: || ||
3border: || ||
4. Tương đương vớiborder: || ||
5border: || ||
- Một giá trị số được đo bằng đơn vị
6. Chỉ định loại đường được vẽ xung quanh phần tử, bao gồmborder: || ||
7. Một dòng liền mạch, liên tụcborder: || ||
8 [mặc định]. Không có dòng nào được vẽborder: || ||
9. Một dòng được vẽ, nhưng không nhìn thấy được. điều này có thể hữu ích để thêm một chút chiều rộng cho một phần tử mà không hiển thị đường viềnborder: || ||
border
0. Một dòng bao gồm các dấu gạch ngangborder
1. Một dòng bao gồm các dấu chấmborder
2. Hai đường được vẽ xung quanh phần tửborder
3. Thêm một góc xiên dựa trên giá trị màu theo cách làm cho phần tử xuất hiện được nhấn vào tài liệuborder
4. Tương tự nhưborder
3, nhưng đảo ngược các giá trị màu theo cách làm cho phần tử có vẻ nổi lênborder
6. Thêm âm tách vào dòng làm cho phần tử có vẻ hơi trầm xuốngborder
7. Tương tự nhưborder
6, nhưng đảo ngược màu theo cách làm cho phần tử có vẻ nổi lên một chút
border
9. Chỉ định màu của đường viền và chấp nhận tất cả các giá trị màu hợp lệ
Phew, đó là rất nhiều giá trị cho một tài sản nhỏ. Đây là bản trình diễn minh họa sự khác biệt giữa tất cả các giá trị kiểu đó
Các thuộc tính viền CSS được sử dụng để chỉ định kiểu, màu sắc và kích thước của đường viền của một phần tử. Các thuộc tính đường viền CSS được đưa ra dưới đây
- kiểu viền
- màu viền
- chiều rộng biên giới
- bán kính đường viền
1] Kiểu viền CSS
Thuộc tính Border style được sử dụng để chỉ định kiểu đường viền mà bạn muốn hiển thị trên trang web
Có một số giá trị kiểu đường viền được sử dụng với thuộc tính kiểu đường viền để xác định đường viền
ValueDescriptionnoneNó không xác định bất kỳ đường viền nào. dottedIt được sử dụng để xác định đường viền chấm chấm. dashedNó được sử dụng để xác định đường viền nét đứt. solidIt được sử dụng để xác định một đường viền rắn. doubleIt xác định hai đường viền có cùng giá trị độ rộng đường viền. rãnhNó xác định đường viền có rãnh 3d. hiệu ứng được tạo theo giá trị màu viền. ridgeIt xác định đường viền có gờ 3d. hiệu ứng được tạo theo giá trị màu viền. insetIt xác định đường viền chèn 3d. hiệu ứng được tạo theo giá trị màu viền. đầuNó xác định đường viền đầu 3d. hiệu ứng được tạo theo giá trị màu viền. Kiểm tra nó ngay bây giờđầu ra
không biên giới
Đường viền chấm
Đường viền nét đứt
Biên giới vững chắc
Đường viền đôi
Đường viền rãnh
Một đường viền sườn núi
Một đường viền chèn
Đường viền ban đầu
Một đường viền ẩn
2] Độ rộng đường viền CSS
Thuộc tính độ rộng đường viền được sử dụng để thiết lập độ rộng của đường viền. Nó được đặt bằng pixel. Bạn cũng có thể sử dụng một trong ba giá trị được xác định trước, mỏng, trung bình hoặc dày để đặt độ rộng của đường viền
Ghi chú. Thuộc tính độ rộng đường viền không được sử dụng một mình. Nó luôn được sử dụng với các thuộc tính đường viền khác như thuộc tính "kiểu đường viền" để đặt đường viền trước nếu không nó sẽ không hoạt động
Kiểm tra nó ngay bây giờ3] Màu đường viền CSS
Có ba phương pháp để đặt màu của đường viền
- Tên. Nó chỉ định tên màu. Ví dụ. "màu đỏ"
- RGB. Nó chỉ định giá trị RGB của màu. Ví dụ. "rgb[255,0,0]"
- lục giác. Nó chỉ định giá trị hex của màu. Ví dụ. "#ff0000"
Ngoài ra còn có một màu đường viền có tên là "trong suốt". Nếu màu đường viền không được đặt, nó sẽ được kế thừa từ thuộc tính màu của phần tử