提问人：hashkeeper 提问时间：11/17/2023 最后编辑：hashkeeper 更新时间：11/17/2023 访问量：42
边框半径 50% 创建意外边框
Border-radius 50% creating an unintended border
问：
在 HTML 和 CSS 中，我需要创建完美的圆形 img 元素，其中 src 设置为各种徽标。当我应用 50% 的边框半径时，问题就出现了，每个徽标的部分被圆形遮挡，就好像有一个厚的边框集一样。
在提供的图像中，可以看出我设置了以下属性：没有任何效果。
border-style: none;
border-width: 0;
outline-style: none;
outline-width: 0;
overflow: visible;
（以为最后一个肯定有效）
答：
-1赞
Fawas
11/17/2023
#1
您可以尝试在宽度和高度相等以及 50% 边框半径的 div 中添加图像标签。它将坚定地帮助您将图像放入一个完美的圆圈中
例：-
<div class="circular-container">
<img src="image-url">
</div>
.circular-container {
width: 150px;
height: 150px;
border-radius: 50%;
overflow: hidden;
}
.circular-container img {
width: 100%;
height: 100%;
object-fit: cover;
}
评论
0赞
hashkeeper
11/17/2023
它不居中，但它有效。谢谢。如果可以的话，我会投票给你
-1赞
Bertrand
11/17/2023
#2
@hashkeeper 你在网上的每张图片上都设置了一个框阴影，这在每张图片上都放了一个奇怪的下边框：
如果删除第 59 行，则每张图像上将不再有奇怪的底部灰色边框。
评论