html - 为什么在我的图片上添加边框会减小它的尺寸？

Question

有没有办法在不减小图像尺寸的情况下为图像添加边框？

<li class="profile-active">

<a href="profile">

<img src="http://placepic.me/profiles/80-80" width="40" height="40" class="img-circle"></a>

</li>

<style>
.profile-acive{
  border: 10px solid #5693F9;
}
</style>

这是圆的CSS

// Perfect circle
.img-circle {

  border-radius: 50%; // set radius in percents

}

Answer 1

首先你应该在 img 元素上同时设置 border 和 border-radius

.img-circle {
  border-radius: 100%;
  border: 10px solid #5693F9; 
}

默认情况下这应该可以正常工作，边框不会导致图片尺寸缩小

FIDDLE

话虽如此，如果您在代码中的某处将 box-sizing 的默认值更改为 border-box，

像这样:

FIDDLE

...那么您必须在图像上使用 box-sizing:content-box; 手动覆盖它，以确保边框不会导致图片尺寸缩小.像这样:

FIDDLE

注意:

如果你想要圆 Angular 边框，请不要使用outline

outline 属性不支持圆 Angular 边框 -

FIDDLE