CSS3制作圆角图片和椭圆形图片

1. CSS3制作圆角图片

圆角图片可以让图片看起来更加柔和，使用CSS3可以很方便地实现图片的圆角处理，这里我们可以通过border-radius属性来简单地实现，给图片加上以下样式即可：

img {
  border-radius: 10px;
}

这样我们就可以给普通的矩形图片添加圆角属性了。另外，我们还可以通过以下代码为图片添加不同的圆角效果：

.img1 {
  border-radius: 50% 0 50% 0; /* 左右两侧圆角，上下两侧不圆角 */
}
.img2 {
  border-radius: 50% 50% 0 0; /* 上方圆角，下方不圆角 */
}
.img3 {
  border-radius: 0 0 50% 50%; /* 下方圆角，上方不圆角 */
}

以上代码展示了三种不同的圆角效果，可以根据自己的需求进行选择和修改。

2. CSS3制作椭圆形图片

椭圆形图片可以让图片看上去更加具有艺术感，同样使用CSS3可以很容易地实现椭圆形图片的效果，这里我们可以通过border-radius属性和transform属性来实现，给图片加上以下样式即可：

img {
  border-radius: 50%; /* 圆形效果 */
  transform: scale(1.5, 1); /* 改变横向缩放比例 */
}

以上代码展示了如何把正方形图片转换为椭圆形图片，使用transform属性可以控制图片的缩放比例，通过调整横向和纵向的缩放比例，就可以实现不同的椭圆形效果，例如：

.img1 {
  transform: scale(1.2, 1.5);
}
.img2 {
  transform: scale(1.5, 1.2);
}

以上代码展示了两种不同的椭圆形效果，可以根据自己的需求进行选择和修改。

3. 总结

通过本文介绍的方法，我们可以方便地实现圆角图片和椭圆形图片的效果，使用CSS3的border-radius属性和transform属性可以轻松地控制图片的形状和效果，可以让图片更加美观和具有艺术感。