边框半径在内部仍为正方形

Question

我有一个页面，其中列出了用户可以选择的一些预定义头像，如此处所示-

这些定义如下-

<span class="avatar-box">
    <img src="..." class="avatar" style="width: 100px; height: 100px;" />
</span>  

.avatar-box {
    width: 120px;
    height: 120px;
    text-align: center;
    vertical-align: middle;
}

.avatar {
    border-radius: 50%;
    margin: 10px;
}

当我单击头像时，jQuery将“ selected”类添加到“头像”-

.selected {
    border: 10px solid #40ac2b !important;
}

但是，在这种情况下，Chrome上会发生以下情况-

如您所见，当化身保持圆形时，添加的边框仍然是正方形。在Firefox中，仅在Chrome中不会发生此行为。

我该如何确保边框像化身本身一样保持圆形？

Answer 1

设置默认边框为透明颜色，并且在悬停/活动边框颜色更改后，因为边框大小会影响大小，即高度和宽度。

看看下面的例子。

body{
  background:#ccc;
}

.avatar-box {
    width: 120px;
    height: 120px;
    text-align: center;
    vertical-align: middle;
    margin: 10px;   
}

.avatar {
    border-radius: 50%;   
    border:10px solid transparent; 
}

.avatar:hover{
  border:10px solid #ff0000;  
}

<span class="avatar-box">
    <img src="https://i.stack.imgur.com/CpldL.png?s=328&g=1" class="avatar" style="width: 100px; height: 100px;" />
</span>