内部底部白线[重复]

Posted 2023-05-07

【中文标题】内部底部白线[重复]

【英文标题】：Bottom white line on inside [duplicate]

【发布时间】：2021-10-04 16:58:46

【问题描述】：

我正在克隆 Quizlet.com。停留在主屏幕风格。 将鼠标悬停在卡片上会添加一个下划线以指示该卡片已被选中。

不悬停时：测验：

我的网站：

将鼠标悬停在测验上时：

将鼠标悬停在我的网站上时：

我在css中添加了border-bottom，它是在区域之外添加的，而不是在div标签的区域内。

编辑： 卡被推出的现象得到了解决。但我不喜欢卡片下的阴影。我会附上一张照片。

【问题讨论】：

看看用outline代替border

【参考方案1】：

您可以尝试两种选择：

box-shadow

::after伪元素

box-shadow:

可能是最短的解决方案 - 创建一个仅在底部可见的 box-shadow，通过指定相同的 blur 和 spread（分别为第 3 和第 4 个参数）来实现。

div 
  width: 100px;
  height: 50px;
  background-color: #1E2230;
  border-radius: 5px;
  transition: 0.2s;


div:hover 
  box-shadow: 0 14px 2px 2px white;


body 
  background-color: #ededed;

<div></div>

^{注意：不符合 OP 的要求 - 轮廓在外面，而不是在里面}

::after伪元素

将一个高度为0px、宽度为100%、边框为10px 的元素绝对定位在div 的底部，其position 必须为relative。

我会推荐这个解决方案，看看它是如何轻松定制和理解的。

div 
  width: 100px;
  height: 50px;
  background-color: #1E2230;
  border-radius: 5px;
  transition: 0.2s;
  position: relative;


div:hover:after 
  content: '';
  border-bottom: 10px solid white;
  position: absolute;
  height: 0px;
  bottom: 0;
  width: 100%;
  left: 0;


body 
  background-color: #ededed;

<div></div>d

【讨论】：

好的。但我希望阴影位于 div 标签区域内。我将添加一个描述。 @Spectirc

【参考方案2】：

如果您使用 devtool 并针对特定的 div，我想您会知道 Quizlet 中该 div 做了什么。