CSS:圆形图像
CSS:圆形图像
提问于 2018-06-10 06:43:45
我正在尝试制作一个圆形的图像，但它看起来并不是一个完美的圆形--毕竟，这是我的代码片段和一个显示结果的链接
#aboutme{
padding: 150px;
}
#aboutme img{
border-radius: 50%;
border: 0;
width: 150px;
vertical-align: middle;
float:left;
padding: 0px 10px 10px 0px;
}回答 2
Stack Overflow用户
回答已采纳
发布于 2018-06-10 06:46:36
填充包括在计算中，边框内的所有内容也包括在内。使用margin而不是padding，它将不会出现在边界框中，从而解决您的问题。
Stack Overflow用户
发布于 2018-06-10 07:34:20
为了形成一个完美的圆，你需要宽度和高度相等，所以border-radius: 50%;塑造圆的老办法应该可以正常工作。
img {
border-radius: 50%;
border: 1px solid;
}
.perfect {
width: 150px;
height: 150px;
}
.weird1 {
width: 150px;
height: 83px;
}
.weird2 {
width: 80px;
height: 150px;
}<img class="perfect"></br>
<img class="weird1"></br>
<img class="weird2"></br>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50779144
复制相关文章
相似问题
腾讯云开发者
