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，但是使用该方法时，您会遇到以下问题：将框悬停时，元素的宽度会发生变化，而不是很难看，但是很难预测宽度是多少，以及宽度如何影响相邻元素。

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

Answer 2

您还可以调整background-clip以避免边框与背景重叠：

.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;
  background-clip:padding-box;
}

.card:hover
{
  border: 5px solid black;
}

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

Answer 3

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

我认为这是您的解决方法

Answer 4

要隐藏border，请使用border:none代替border: 5px solid rgba(0,0,0,0);

使用border: 5px solid rgba(0,0,0,0);意味着您应用边框，但使用transparent color。

.card
{
  width: 250px;
  height: 300px;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  z-index: 1;
  border: none;
  background-color: red;
}

.card:hover
{
  border: 5px solid black;
}

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

隐藏/显示边框

4 个答案: