引导边界半径 - Html

在Bootstrap中，引导边界半径（Border Radius）类用于添加圆角边框样式。它可以应用于按钮、图像、表单等元素。Bootstrap提供了不同的半径尺寸，开发者可以根据自己的需要选择不同的尺寸。

Border Radius类

Bootstrap提供了以下边界半径类：

• .border-radius-0: 没有圆角；
• .border-radius-1: 小圆角；
• .border-radius-2: 中等圆角；
• .border-radius-3: 大圆角；
• .border-radius-4: 巨大圆角。

例如，要应用中等圆角样式，可以将类名 .border-radius-2 添加到元素上，如下所示：

<button class="btn border-radius-2">中等圆角按钮</button>

该按钮将具有中等圆角样式。

自定义边界半径

如果以上提供的半径类不能满足开发者的需求，可以使用自定义类来设置边界半径。

通过设置 -webkit-border-radius 和 -moz-border-radius 属性的值，可以让样式适用于不同的浏览器。

例如：

<button class="btn my-radius">自定义圆角按钮</button>

<style>
  .my-radius {
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
  }
</style>

该按钮将具有自定义圆角样式。

结论

引导边界半径类是Bootstrap提供的简单易用的样式类，可以方便地添加圆角样式。如果需要更加细致的设置，也可以使用自定义类来设置。