Css kiểu viền

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

  • border:  ||  || 

    0. Tương đương với

    border:  ||  || 

    1

  • border:  ||  || 

    2. Tương đương với

    border:  ||  || 

    3

  • border:  ||  || 

    4. Tương đương với

    border:  ||  || 

    5

• border:  ||  || 

  6. Chỉ định loại đường được vẽ xung quanh phần tử, bao gồm

  • border:  ||  || 

    7. Một dòng liền mạch, liên tục

  • border:  ||  || 

    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ền
  • border0. Một dòng bao gồm các dấu gạch ngang
  • border1. Một dòng bao gồm các dấu chấm
  • border2. Hai đường được vẽ xung quanh phần tử
  • border3. 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ệu
  • border4. Tương tự như border3, 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ên
  • border6. Thêm âm tách vào dòng làm cho phần tử có vẻ hơi trầm xuống
  • border7. Tương tự như border6, 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
• border9. 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ử