边界半径在内部仍为方形

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 {
    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>  

​