Kích thước đường viền CSS

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à

7

2

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ình

9

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

1

Thuộ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

2

Thuộ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

3

Bạ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;

4

Thuộ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ử

5

Sử 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

Kích thước đường viền trong CSS là gì?

Chiều rộng đường viền được tính như thế nào?