css怎么实现图片圆角

在CSS中，实现图片圆角主要有两种方法：

1. 使用`border-radius`属性：
对于块级元素如 `<div>` 或 `<img>`，你可以直接设置其边框的圆角。例如，如果你要让一个图像四角都变成圆形，可以这样做：

   .image-rounded {
       border-radius: 50%; /* 将半径设置为元素宽高的50% */
       width: 200px; /* 如果你想保持原始比例，可以用max-width或width */
       height: 200px;
   }

如果想只设置部分角落为圆角，比如顶部左角，可以这样设置两个不同的半径：

   .image-rounded-top-left {
       border-top-left-radius: 20px;
       border-bottom-left-radius: 0;
       border-top-right-radius: 0;
       border-bottom-right-radius: 20px;
   }

2. 使用`background-clip`和`mask-image`属性：
对于背景图，如果想要裁剪成特定形状，可以结合`background-clip: content-box`和`mask-image: url()`来实现。但这种方法可能涉及到额外的CSS3 mask 函数，例如 `circle()` 或 `ellipse()`。

   .image-masked {
       background-clip: content-box;
       -webkit-mask-image: url(data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='40'/%3E%3C/svg%3E); /* 假设这是你的SVG圆角路径 */
       background-size: cover;
   }

记得替换`url(data:image/svg+xml...)`中的路径为你所需的圆角SVG代码。