Bootstrap4 图像形状学习笔记

在Bootstrap4中，我们可以使用一些类来修改图像的形状。这些类不需要任何CSS，只需要添加它们到HTML元素中就可以了。以下是一些常用的图像形状类：

圆形图片

要将图片变成圆形，可以使用.rounded-circle类。例如：

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

圆角图片

要将图片的边角变成圆角，可以使用.rounded类。该类有四个不同的变体：.rounded-top、.rounded-right、.rounded-bottom和.rounded-left，分别适用于不同的边角。例如：

htmlCopy Code
<img src="example.jpg" alt="example" class="rounded">
<img src="example.jpg" alt="example" class="rounded-top">
<img src="example.jpg" alt="example" class="rounded-right">
<img src="example.jpg" alt="example" class="rounded-bottom">
<img src="example.jpg" alt="example" class="rounded-left">

椭圆形图片

要将图片变成椭圆形，可以使用.rounded-0和.rounded-pill类。.rounded-0将图片变成直角的椭圆形，而.rounded-pill将图片变成更加扁平的椭圆形。例如：

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

实例

以下是一些使用Bootstrap4图像形状类的实例：

htmlCopy Code
<img src="https://via.placeholder.com/150" alt="example" class="rounded-circle">
<img src="https://via.placeholder.com/150" alt="example" class="rounded">
<img src="https://via.placeholder.com/150" alt="example" class="rounded-top">
<img src="https://via.placeholder.com/150" alt="example" class="rounded-right">
<img src="https://via.placeholder.com/150" alt="example" class="rounded-bottom">
<img src="https://via.placeholder.com/150" alt="example" class="rounded-left">
<img src="https://via.placeholder.com/150" alt="example" class="rounded-0">
<img src="https://via.placeholder.com/150" alt="example" class="rounded-pill">

以上实例中，我们使用了https://via.placeholder.com/150作为图片的占位符。你可以将这些URL替换为你自己的图片URL。