为何border-radius样式无法应用到指定图片？

云上老周

2026-7-26

解决图片圆角不生效的问题

问题根源

你给包裹图片的#img容器设置了border-radius，但图片本身是独立元素，会超出容器的圆角边界，所以看不到图片的圆角效果。

方案一：容器裁剪溢出内容

给#img容器添加overflow:hidden，让容器裁剪掉超出圆角的图片部分，图片就会跟着显示圆角：

#img {
  display: block;
  float: right;
  margin: 0 0 15px 20px;
  padding: 10px;
  border-radius: 15px;
  background-color: #FFFFFF;
  margin-right: 50px;
  overflow: hidden; /* 新增这行 */
}

方案二：直接给目标图片设置圆角

如果不想依赖容器裁剪，可以直接给#img容器内的图片设置圆角，同时用选择器排除logo和首图：

/* 给#img里的图片添加圆角 */
#img img {
  border-radius: 15px;
}

/* 排除logo图片 */
#logo img {
  border-radius: 0;
}

/* 排除首页的英雄图 */
#page > div:nth-child(3) img {
  border-radius: 0;
}