Bootstrap5 图像形状学习笔记

圆形图片

要将图像变成圆形，请使用 rounded-circle 类。

htmlCopy Code
<img src="image.jpg" class="rounded-circle" alt="...">

椭圆形图片

要将图像变成椭圆形，请使用 rounded-pill 类。

htmlCopy Code
<img src="image.jpg" class="rounded-pill" alt="...">

圆角图片

要将图像添加圆角，请使用 rounded 类并指定一个值（0-5）来表示圆角的大小。

htmlCopy Code
<img src="image.jpg" class="rounded-3" alt="...">

多个圆角

要为图像的不同角添加不同的圆角，请使用 rounded-{position}-{size} 类，并将“位置”替换为 top，bottom，start 或 end，将“大小”替换为 0、1、2、3、4 或 5。

htmlCopy Code
<img src="image.jpg" class="rounded-top rounded-end" alt="...">

图像外边框

要添加图像外边框，请使用 border 类，并指定一个值（0-5）以确定边框的宽度。

htmlCopy Code
<img src="image.jpg" class="border border-2" alt="...">

图像圆角和外边框组合

您可以组合上面提到的类来创建具有多种效果的图像。

htmlCopy Code
<img src="image.jpg" class="rounded-circle border border-secondary border-5" alt="...">

以上是 Bootstrap5 图像形状的学习笔记。