Thuộc tính độ rộng đường viền được sử dụng làm phương pháp tốc ký để chỉ định tất cả 4 độ rộng đường viền ở một nơi. Xem Mô hình hộp để biết mô tả về các hộp được tạo cho các phần tử và vị trí tương đối của các đường viền
- Các mặt đường viền riêng lẻ được chỉ định như sau
- Nếu 1 chiều rộng được chỉ định - Tất cả 4 đường viền được đặt theo chiều rộng này
- Nếu 2 chiều rộng được chỉ định - chiều rộng thứ nhất = đường viền trên và dưới, chiều rộng thứ 2 = đường viền trái và phải
- Nếu 3 chiều rộng được chỉ định - chiều rộng thứ nhất = viền trên, chiều rộng thứ 2 = viền trái và phải, chiều rộng thứ 3 = viền dưới
- Nếu 4 chiều rộng được chỉ định - chiều rộng thứ nhất = viền trên, chiều rộng thứ 2 = viền phải, chiều rộng thứ 3 = viền dưới và chiều rộng thứ 4 = viền trái
Ví dụ CSS. Bốn thuộc tính độ rộng đường viền khác nhau được đặt bằng cách chỉ định một, hai, ba và bốn giá trị chiều rộng tương ứng.
#sample1 {border: thin solid red; border-width: 3px; } #sample2 {border: thin solid red; border-width: thick 1px; } #sample3 {border: thin solid red; border-width: 1px medium 0.5em; } #sample4 {border: thin solid red; border-width: 5px 10px 15px 20px; }
Sử dụng các tiện ích ________ 27, ________ 28, ________ 29, _______ 30 hoặc
1 để đặt độ rộng đường viền cho tất cả các cạnh của phần tửbên cá nhân
Sử dụng các tiện ích ________ 20, ________ 21, ________ 22, ________ 23 hoặc
4 để đặt độ rộng đường viền cho một bên của phần tử
Các mặt ngang và dọc
Sử dụng tiện ích
5 để đặt độ rộng đường viền trên hai mặt của một phần tử cùng một lúc
Giữa các phần tử
Bạn cũng có thể thêm đường viền giữa các phần tử con bằng tiện ích
6 và
72
Tìm hiểu thêm trong tài liệu Chia chiều rộng và Chia màu
áp dụng có điều kiện
Di chuột, tập trung và các trạng thái khác
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
8 để chỉ áp dụng tiện ích
9 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
0 để áp dụng tiện ích
9 chỉ với kích thước màn hình trung bình trở lênĐể tìm hiểu thêm, hãy xem tài liệu về Thiết kế đáp ứng, Chế độ tối và
Sử dụng các giá trị tùy chỉnh
Tùy chỉnh chủ đề của bạn
Theo mặc định, Tailwind cung cấp năm tiện ích
2 và cùng số lượng tiện ích mỗi bên [ngang, dọc, trên, phải, dưới và trái]. Bạn thay đổi, thêm hoặc xóa những thứ này bằng cách chỉnh sửa phần
3 trong cấu hình Tailwind của mình9
Tìm hiểu thêm về cách tùy chỉnh chủ đề mặc định trong tài liệu
Giá trị tùy ý
Nếu bạn cần sử dụng giá trị
4 một lần không hợp lý để đưa vào chủ đề của mình, hãy sử dụng dấu ngoặc vuông để tạo nhanh một thuộc tính bằng cách sử dụng bất kỳ giá trị tùy ý nào Trong chương này, chúng ta sẽ nói về đường viền và cách chúng ta có thể tạo kiểu cho chúng. Chúng ta có thể cung cấp chiều rộng, kiểu dáng và màu sắc cho đường viền
1Thuộc tính độ rộng đường viền đặt độ rộng của đường viền
Chiều rộng có thể được chỉ định bằng pixel. Nó cũng có thể được chỉ định bởi một trong ba giá trị được xác định trước. trung bình, mỏng hoặc dày
Bạn không thể sử dụng thuộc tính "độ rộng đường viền" một mình. Nó sẽ không làm việc. Sử dụng "kiểu đường viền" để đặt đường viền trước
2Thuộc tính màu viền được sử dụng để đặt màu cho đường viền. Màu sắc có thể được thiết lập bởi
- tên - chỉ định tên màu, như "đỏ"
- RGB - chỉ định giá trị RGB, như "rgb[255,0,0]"
- Hex - chỉ định giá trị hex, như "#ff0000"
Bạn không thể sử dụng thuộc tính "màu viền" một mình. Nó sẽ không làm việc. Sử dụng "kiểu đường viền" để đặt đường viền trước
Thông thường, chúng tôi viết ba thuộc tính này cùng nhau trong một hàng
3Bạn có thể thử các ví dụ khác với công cụ CSS Maker của chúng tôi
Thuộc tính kiểu viền CSS đặt kiểu cho cả bốn cạnh của đường viền của phần tử. Đường viền được đặt trên nền của phần tử. Nó có thể có từ một đến bốn giá trị. Vì vậy, mỗi bên có thể có giá trị của nó. Giá trị mặc định của kiểu viền là không
Kiểu viền có các giá trị sau
- say mê
- tiêu tan
- chất rắn
- gấp đôi
- rãnh
- cây rơm
- chèn vào
- khởi đầu
Một số trình duyệt không hỗ trợ một số kiểu. Thông thường, khi một kiểu không được hỗ trợ, trình duyệt sẽ vẽ đường viền dưới dạng một đường liền nét
CSS cung cấp các thuộc tính chỉ định từng đường viền [phải, trái, dưới và trên]
Thuộc tính kiểu viền có thể có 4 giá trị, ví dụ: kiểu viền. gạch ngang nét đứt đôi;
Thuộc tính kiểu viền có thể có 3 giá trị, ví dụ: kiểu viền. chấm rắn đôi;
Thuộc tính kiểu viền có thể có 2 giá trị, ví dụ: kiểu viền. chất rắn có chấm; . Và, tất nhiên, thuộc tính này chỉ có thể có 1 giá trị, ví dụ: kiểu viền. chất rắn;
4Thuộc tính đường viền CSS là thuộc tính tốc ký cho các thuộc tính đường viền riêng lẻ sau
- Thuộc tính độ rộng đường viền CSS, đặt chiều rộng của cả bốn cạnh của đường viền của phần tử
- Thuộc tính kiểu viền CSS, đặt kiểu cho cả bốn cạnh của đường viền của phần tử
- Thuộc tính màu viền CSS, đặt màu cho cả bốn cạnh của đường viền của phần tử
5Sử dụng thuộc tính bán kính đường viền CSS, bạn có thể thêm các đường viền tròn vào một phần tử
6Đường viền và đường viền thường gây nhầm lẫn vì chúng rất giống nhau. Nhưng có sự khác biệt giữa hai