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

<span class="border">span>
<span class="border-top">span>
<span class="border-end">span>
<span class="border-bottom">span>
<span class="border-start">span>

Trừ

<span class="border-0">span>
<span class="border-top-0">span>
<span class="border-end-0">span>
<span class="border-bottom-0">span>
<span class="border-start-0">span>

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.

<span class="border border-primary">span>
<span class="border border-secondary">span>
<span class="border border-success">span>
<span class="border border-danger">span>
<span class="border border-warning">span>
<span class="border border-info">span>
<span class="border border-light">span>
<span class="border border-dark">span>
<span class="border border-white">span>

Border-width

<span class="border border-1">span>
<span class="border border-2">span>
<span class="border border-3">span>
<span class="border border-4">span>
<span class="border border-5">span>

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

<img src="..." class="rounded" alt="...">
<img src="..." class="rounded-top" alt="...">
<img src="..." class="rounded-end" alt="...">
<img src="..." class="rounded-bottom" alt="...">
<img src="..." class="rounded-start" alt="...">
<img src="..." class="rounded-circle" alt="...">
<img src="..." class="rounded-pill" alt="...">

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ừ

<span class="border-0">span>
<span class="border-top-0">span>
<span class="border-end-0">span>
<span class="border-bottom-0">span>
<span class="border-start-0">span>

1 đến

<span class="border-0">span>
<span class="border-top-0">span>
<span class="border-end-0">span>
<span class="border-bottom-0">span>
<span class="border-start-0">span>

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

<img src="..." class="rounded-0" alt="...">
<img src="..." class="rounded-1" alt="...">
<img src="..." class="rounded-2" alt="...">
<img src="..." class="rounded-3" alt="...">

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

<span class="border-0">span>
<span class="border-top-0">span>
<span class="border-end-0">span>
<span class="border-bottom-0">span>
<span class="border-start-0">span>

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
    ),
    

<span class="border-0">span>
<span class="border-top-0">span>
<span class="border-end-0">span>
<span class="border-bottom-0">span>
<span class="border-start-0">span>

0