设置图片圆形圆角顶部未生效，疑padding导致但需保留间距求助

你的问题核心是padding加在了img元素本身，导致元素实际宽高比失衡，所以border-radius: 50%出不了正圆。

问题分析 #

img元素设置了width:300px和height:300px，但同时加了padding-top:20%和padding-bottom:5%——padding的百分比是基于父元素宽度计算的，这会让img的总高度变成300px + 20%父宽 +5%父宽，宽度却还是300px，宽高比不再是1:1，自然无法形成正圆。另外HTML里img的width=100%和CSS的width:300px !important也存在冲突，会干扰尺寸计算。

解决方案 #

把padding移到父容器.fade-in-image上，让img本身保持纯净的1:1宽高，这样border-radius:50%就能正常生效，同时父容器的padding依然能维持你需要的间距。

修改后的代码如下：

CSS部分

button { 
  background-color: #433966;
  border: 5px solid #5d596a;
  border-radius: 10px;
  box-shadow: 8px 8px 8px rgba(65, 62, 62, 0.2);
  margin: 0px auto;
  display: block;
  color: rgb(205, 187, 162);
  font-size: 20px;
  padding: 15px 20px;
  transition: all 300ms ease;
  text-align: justify;
  font-weight: bold;
  font-family: Optima;
}

.fade-in-image {
  /* 把原本img的padding移到父容器 */
  padding-top: 20%;
  padding-bottom: 5%;
}

img {
  border-radius: 50%;
  /* 去掉无用的perspective属性 */
  border: 1px solid silver; /* 补充边框的宽度和样式，否则边框不会显示 */
  width: 300px;
  height: 300px;
  display: block;
  margin: 0 auto; /* 确保图片居中 */
}

HTML部分

<div class="fade-in-image">
  <img src="images/rachel.jpg" alt="Avatar" class="center">
  <button>Portfolio</button>
</div>

进阶优化（可选） #

如果你不想固定图片的宽高，希望它能自适应父容器，同时保持圆形，可以用object-fit: cover确保图片不变形，代码调整为：

.fade-in-image {
  padding-top: 20%;
  padding-bottom: 5%;
  width: 300px; /* 父容器固定宽度 */
  margin: 0 auto;
}

img {
  border-radius: 50%;
  border: 1px solid silver;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 让图片填满容器，保持比例不拉伸 */
}

这样不管你的原图是什么比例，都能完美填充成圆形，同时不会变形。

内容的提问来源于stack exchange，提问作者Rachel Alicia