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

CSS3可以通过border-radius属性来制作圆角图片和通过border-radius和background-size属性来制作椭圆形图片。

1. 制作圆角图片

border-radius属性让开发者可以为元素添加圆角边框。如果应用于img标签，就可以实现圆角图片的效果。

代码示例：

img{
    border-radius: 50%;
    }

这里的50%表示图片的四个角都将被切成半径为图片宽度的50%的圆。如果希望只将某一个角切成圆角，可以通过border-top-left-radius,border-top-right-radius,border-bottom-left-radius,border-bottom-right-radius属性来分别设定每个角的边框半径值。

2. 制作椭圆形图片

制作椭圆形图片需要用到border-radius和background-size两个属性。border-radius属性设定圆角半径，而background-size属性用于设置背景图像大小。

代码示例：

img{
    border-radius: 50%;
    background-size: cover;
    }

因为原始图片是矩形的，所以缩放后背景会留下空白区域。通过background-position属性可以改变背景图像在元素内的位置来避免留白。

img{
    border-radius: 50%;
    background-size: cover;
    background-position: 50% 50%;
    }

这里的50% 50%表示将背景图片居中显示。

除了使用background-size属性缩放图片，还可以通过CSS3的transform属性对图片进行缩放、旋转和变形等操作。

代码示例：

img{
    border-radius: 50%;
    transform: scale(2);
    }

这里的scale(2)表示将图片的大小扩大两倍。也可以通过rotate()函数来实现图片的旋转等效果。

总的来说，制作圆角图片和椭圆形图片都很简单，只需要借助border-radius和background-size两个属性即可。可以让你的页面更加的美观，从而提升用户的使用体验。