CSS màu viền

Sử dụng các tiện ích đường viền để thêm hoặc xóa đường viền của phần tử. Chọn từ tất cả các đường viền hoặc từng đường viền một

phụ gia

Thêm đường viền vào các yếu tố tùy chỉnh

trừ

Hoặc xóa viền

Màu sắc

Thay đổi màu đường viền bằng các tiện ích được xây dựng dựa trên màu sắc chủ đề của chúng tôi

Hoặc sửa đổi

6 mặc định của một thành phần

Thay đổi màu sắc và chiều rộng đường viền

  Email address
  



  Dangerous heading



  Changing border color and width

độ mờ

Đã thêm vào v5. 2. 0

Các tiện ích Bootstrap

7 được tạo bằng Sass bằng cách sử dụng các biến CSS. Điều này cho phép thay đổi màu sắc theo thời gian thực mà không cần biên dịch và thay đổi độ trong suốt của alpha động

Làm thế nào nó hoạt động

Hãy xem xét tiện ích

8 mặc định của chúng tôi

.border-success {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-success-rgb), var(--bs-border-opacity)) !important;
}

Chúng tôi sử dụng phiên bản RGB của biến CSS

9 (với giá trị là

0) và đính kèm một biến CSS thứ hai,

1, để tạo độ trong suốt của alpha (với giá trị mặc định là

2 nhờ một biến CSS cục bộ). Điều đó có nghĩa là bất cứ lúc nào bạn sử dụng

8 ngay bây giờ, giá trị

4 được tính toán của bạn là

5. Biến CSS cục bộ bên trong mỗi lớp

6 tránh các vấn đề thừa kế nên các phiên bản lồng nhau của các tiện ích không tự động có độ trong suốt alpha được sửa đổi

Thí dụ

Để thay đổi độ mờ đó, hãy ghi đè

1 thông qua kiểu tùy chỉnh hoặc kiểu nội tuyến

Đây là đường viền thành công mặc định

Đây là đường viền thành công có độ mờ 50%

7

Hoặc, chọn từ bất kỳ tiện ích nào của

8

Đây là đường viền thành công mặc định

Đây là đường viền thành công có độ mờ 75%

Đây là đường viền thành công có độ mờ 50%

Đây là đường viền thành công có độ mờ 25%

Đây là đường viền thành công có độ mờ 10%

9

Bề rộng

bán kính

Thêm các lớp vào một phần tử để dễ dàng làm tròn các góc của nó

75x75 75x75 75x75 75x75 75x75 75x75 150x75

1

kích cỡ

Sử dụng các lớp tỷ lệ cho các góc tròn lớn hơn hoặc nhỏ hơn. Kích thước nằm trong khoảng từ

9 đến

  Email address
  



  Dangerous heading



  Changing border color and width

0 và có thể được định cấu hình bằng cách sửa đổi API tiện ích

75x75 75x75 75x75 75x75 75x75 75x75

4

CSS

Biến

Đã thêm vào v5. 2. 0

0

biến sass

1

2

Sass mixin

3

API tiện ích

Tiện ích biên giới được khai báo trong API tiện ích của chúng tôi trong

  Email address
  



  Dangerous heading



  Changing border color and width

1. Tìm hiểu cách sử dụng API tiện ích

Bạn có thể tạo kiểu 4 màu khác nhau cho một đường viền trong CSS không?

Thẻ nào được sử dụng cho màu đường viền?