CSS如何实现图片底部圆弧边框效果？

要在CSS中实现图片底部圆弧边框效果，可以使用 border-radius 属性并结合 overflow: hidden 来裁剪图片的边缘。以下是一个简单的实现方法：

HTML 结构

<div class="image-container">
  <img src="your-image.jpg" alt="Sample Image">
</div>

CSS 样式

.image-container {
  width: 300px; /* 设置容器的宽度 */
  height: 200px; /* 设置容器的高度 */
  overflow: hidden; /* 隐藏超出容器的部分 */
  border-radius: 0 0 20px 20px; /* 只在底部设置圆弧 */
}

.image-container img {
  width: 100%; /* 图片宽度填满容器 */
  height: 100%; /* 图片高度填满容器 */
  object-fit: cover; /* 保持图片比例并覆盖整个容器 */
}

解释

1. .image-container:

   • width 和 height 设置了容器的尺寸。
   • overflow: hidden 确保图片超出容器的部分被裁剪掉。
   • border-radius: 0 0 20px 20px 只在容器的底部两个角设置了圆弧效果。20px 是圆弧的半径，你可以根据需要调整这个值。

2. .image-container img:

   • width: 100% 和 height: 100% 使图片填满整个容器。
   • object-fit: cover 确保图片保持其宽高比并覆盖整个容器，避免图片变形。

其他注意事项

• 如果你希望圆弧效果更加明显，可以增加 border-radius 的值。
• 如果你希望图片的其他部分也有圆弧效果，可以调整 border-radius 的值，例如 border-radius: 20px; 会使所有四个角都有圆弧效果。

示例

<div class="image-container">
  <img src="https://via.placeholder.com/300x200" alt="Sample Image">
</div>

.image-container {
  width: 300px;
  height: 200px;
  overflow: hidden;
  border-radius: 0 0 20px 20px;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

这样，图片的底部就会呈现出圆弧边框的效果。