html - 隐藏/显示边框

Question

今天我尝试用 HTML/CSS 创建一张带有隐藏边框的卡片，将鼠标悬停在卡片上后会出现该边框。我想出了这段代码，对我来说效果很好:

.card
{
  width: 250px;
  height: 300px;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  z-index: 1;
  border: 5px solid rgba(0,0,0,0);
  background-color: red;
}

.card:hover
{
  border: 5px solid black;
}

<div class="card">
</div>

我只是想知道是否有更好的方法来做到这一点。这很好用，因为我不需要为它设置动画，但这是隐藏边框的正确方法吗？感谢您的回答。

编辑:我想我应该编辑我的问题，因为我不想使用 box-sizing: border-box 属性。我想用“内容框”隐藏我的边框。而这里 border: none 将不起作用。

Answer 1

您的解决方案是处理此问题的正确方法。

其他人评论说，要隐藏边框，您应该使用 border: 0px 或 border: none 但使用该方法时，您会遇到问题，即当框悬停时，元素的宽度发生变化，不仅很难看，而且很难预测宽度是多少，以及它如何影响相邻元素。

我会使用与您使用的完全相同的方法。