[分享]css3截取长方形圆形图片

CSS3是现代web开发不可或缺的一部分，它可以实现许多华丽的效果，其中之一就是截取长方形和圆形图片。下面我们将展示如何使用CSS3来实现这种图片截取的效果。.rectangle{ height: 2...

CSS3是现代web开发不可或缺的一部分，它可以实现许多华丽的效果，其中之一就是截取长方形和圆形图片。下面我们将展示如何使用CSS3来实现这种图片截取的效果。

.rectangle{
  height: 200px;
  width: 300px;
  background-image: url("path/to/image.jpg");
  background-size: cover;
}

.circle{
  height: 200px;
  width: 200px;
  background-image: url("path/to/image.jpg");
  background-size: cover;
  border-radius: 50%;
}

如上所示，我们为长方形和圆形图片创建了两个不同的CSS类。在长方形样式中，我们设置了高度和宽度，并使用background-image属性来设置背景图像，将其覆盖整个元素。接下来，在圆形样式中，我们同样设置了高度和宽度，并且使用border-radius属性将其形状调整为圆形。

在上面的代码中，我们同样使用了background-image属性来设置背景图像。background-size属性用于指定如何调整背景图像的大小以适应元素大小。我们设置为“cover”，这意味着背景图像将被缩放和裁剪以填满整个元素。

通过这些简单的CSS规则，我们可以轻松地截取和呈现长方形和圆形图片。这种技术可以用于创建图片背景、轮播图和小图标等众多场合。