Hướng dẫn border-radius bootstrap 5 - bootstrap bán kính biên giới 5

Biên giới

Sử dụng các tiện ích biên giới để thêm hoặc loại bỏ một phần tử biên giới.Chọn từ tất cả các biên giới hoặc một tại một thời điểm.

Phụ gia

Trừ

Màu viền

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

Border-width

Border-radius

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ó.

Ví dụ hình ảnh tròn75x75 Ví dụ hình ảnh tròn trên cùng hình ảnh tròn75x75 Ví dụ hình ảnh tròn bên phải75x75 Ví dụ hình ảnh tròn dưới cùng hình ảnh tròn75x75 Ví dụ hình ảnh tròn trái

Kích thướ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 dao động từ

1 đến

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

Ví dụ Image không tròn75x75 Ví dụ Image tròn nhỏ75x75 Ví dụ hình ảnh tròn mặc định75x75 Ví dụ hình ảnh tròn lớn75x75

Sass

Biến

$border-width:                1px;
$border-widths: [
  1: 1px,
  2: 2px,
  3: 3px,
  4: 4px,
  5: 5px
];

$border-color:                $gray-300;

$border-radius:               .25rem;
$border-radius-sm:            .2rem;
$border-radius-lg:            .3rem;
$border-radius-pill:          50rem;

Mixins

@mixin border-radius[$radius: $border-radius, $fallback-border-radius: false] {
  @if $enable-rounded {
    border-radius: valid-radius[$radius];
  }
  @else if $fallback-border-radius != false {
    border-radius: $fallback-border-radius;
  }
}

@mixin border-top-radius[$radius: $border-radius] {
  @if $enable-rounded {
    border-top-left-radius: valid-radius[$radius];
    border-top-right-radius: valid-radius[$radius];
  }
}

@mixin border-end-radius[$radius: $border-radius] {
  @if $enable-rounded {
    border-top-right-radius: valid-radius[$radius];
    border-bottom-right-radius: valid-radius[$radius];
  }
}

@mixin border-bottom-radius[$radius: $border-radius] {
  @if $enable-rounded {
    border-bottom-right-radius: valid-radius[$radius];
    border-bottom-left-radius: valid-radius[$radius];
  }
}

@mixin border-start-radius[$radius: $border-radius] {
  @if $enable-rounded {
    border-top-left-radius: valid-radius[$radius];
    border-bottom-left-radius: valid-radius[$radius];
  }
}

@mixin border-top-start-radius[$radius: $border-radius] {
  @if $enable-rounded {
    border-top-left-radius: valid-radius[$radius];
  }
}

@mixin border-top-end-radius[$radius: $border-radius] {
  @if $enable-rounded {
    border-top-right-radius: valid-radius[$radius];
  }
}

@mixin border-bottom-end-radius[$radius: $border-radius] {
  @if $enable-rounded {
    border-bottom-right-radius: valid-radius[$radius];
  }
}

@mixin border-bottom-start-radius[$radius: $border-radius] {
  @if $enable-rounded {
    border-bottom-left-radius: valid-radius[$radius];
  }
}

API tiện ích

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

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

    "border": [
      property: border,
      values: [
        null: $border-width solid $border-color,
        0: 0,
      ]
    ],
    "border-top": [
      property: border-top,
      values: [
        null: $border-width solid $border-color,
        0: 0,
      ]
    ],
    "border-end": [
      property: border-right,
      class: border-end,
      values: [
        null: $border-width solid $border-color,
        0: 0,
      ]
    ],
    "border-bottom": [
      property: border-bottom,
      values: [
        null: $border-width solid $border-color,
        0: 0,
      ]
    ],
    "border-start": [
      property: border-left,
      class: border-start,
      values: [
        null: $border-width solid $border-color,
        0: 0,
      ]
    ],
    "border-color": [
      property: border-color,
      class: border,
      values: map-merge[$theme-colors, ["white": $white]]
    ],
    "border-width": [
      property: border-width,
      class: border,
      values: $border-widths
    ],