如何在 HTML 中对图像的边缘进行圆角处理

在 HTML 中，可以通过 CSS 样式来对图像的边缘进行圆角处理。具体方法如下：

1. 使用 border-radius 属性

使用 CSS 的 border-radius 属性，可以设置元素的圆角大小。将这个属性应用在图片元素上，即可让图片的边缘变成圆角状。

<img src="image.jpg" style="border-radius: 10px;">

上述代码将 image.jpg 图片的边缘设置成了 10 像素的圆角大小。

如果想设置不同的圆角大小，可以使用四个值来分别指定各个角的大小。

<img src="image.jpg" style="border-radius: 10px 20px 30px 40px;">

上述代码设置左上角为 10 像素，右上角为 20 像素，右下角为 30 像素，左下角为 40 像素。

2. 使用 clip-path 属性

使用 CSS3 的 clip-path 属性，可以让图片的边缘变成圆角状。这种方式比 border-radius 更加灵活，也可以实现不规则形状的圆角。

<img src="image.jpg" style="clip-path: circle(50%);">

上述代码将 image.jpg 的边缘裁剪成了一个半径为 50% 的圆形。

如果想要不规则的圆角状，则需要使用 polygon() 函数。例如，将左侧边缘变成圆角：

<img src="image.jpg" style="clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 100%, 0 50%);">

上述代码将 image.jpg 的左侧边缘设置成了半圆形。

3. 使用 CSS3 圆形图片

使用 CSS3 的 border-radius 和 background 属性，可以实现圆形图片。

<div class="circle">
  <img src="image.jpg">
</div>

<style>
.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
}

.circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>

上述代码将 image.jpg 变成了一个半径为 50 像素的圆形图像。.circle 类设置了宽度和高度，以及半径为 50% 的圆角。.circle img 则填满 .circle 容器，并通过 object-fit 属性让图片保持比例缩放。

参考链接：CSS 图像圆角