Html 将带填充的边框添加到活动/非活动类

我正在努力实现以下目标： 我有图像，我需要在

img

上加上1px黑色和1px白色的边框，以获得一些效果。在悬停3px边框上，单击“成为活动类”，并将悬停更改为3px的固定边框

最好的方法是什么

我试着在a链接上填充3px 并提出以下意见:

a {
    float:left;
    background-color:white;
    padding:3px;
}

及

问题是边界不相等，稍微移动

img

。 另外，当我将所有UI悬停时，我需要不透明度0.5，这使得

a

因此，我正在寻找3种边界的最佳解决方案，其中包括悬停和活动/非活动边界，而不影响

img

我的代码是：

<ul>
   <li>
      <div>
          <a class="active">
              <img>
          </a>
      </div>
   </li>
   <li>
      <div>
          <a>
              <img>
          </a>
      </div>
   </li>
</ul>

不确定这是否是您的想法，但我希望下面的输出可以帮助您开始

这里的主要技巧是将

因此，默认情况下，图像需要1px左右的边框，当鼠标悬停/单击/激活时，需要3px左右的边框…这就是您要查看的内容吗？如果您试图在边框更改时阻止

img

跳转，请尝试在有边框的元素上使用

框大小：border box

。@geky是的，但也可以使用图像上的边框为1px白色（2个固定边框）

<ul>
   <li>
      <div>
          <a class="active">
              <img>
          </a>
      </div>
   </li>
   <li>
      <div>
          <a>
              <img>
          </a>
      </div>
   </li>
</ul>