HTML/CSS：在不影响高度的情况下增加边框大小答案

【问题标题】：HTML/CSS: increase border size without affect the heightHTML/CSS：在不影响高度的情况下增加边框大小
【发布时间】：2019-10-31 18:49:13
【问题描述】：

我有一个表格，每列的边框底部为 1px。在行悬停时，我想将边框设置为 2px，请参见示例：

tr td {
  border-bottom: 1px solid grey;
}

tr:hover td {
   border-bottom: 2px solid red;
}

<table>
  <tr><td>foo</td><td>bar</td></tr>
  <tr><td>foo</td><td>bar</td></tr>
</table>

悬停时，行的高度增加，下一行向下移动 1px。

我可以在不影响高度的情况下增加边框大小吗？

【问题讨论】：

一开始为什么不希望边框增加行高？无论如何，边界都需要以某种方式扩大。

标签： html css

【解决方案1】：

尝试border-image，如下所示：

tr td {
  border-bottom: 2px solid transparent;
  border-image:linear-gradient(to top,grey 1px,transparent 0) 2;
}

tr:hover td {
  border-image:linear-gradient(to top,red 2px,transparent 0) 2;
}

<table>
<tr><td>foo</td><td>bar</td></tr>
<tr><td>foo</td><td>bar</td></tr>
</table>

或者和背景一样的渐变：

tr td {
  padding-bottom:2px;
  background:linear-gradient(to top,grey 1px,transparent 0);
}

tr:hover td {
  background:linear-gradient(to top,red 2px,transparent 0);
}

<table>
<tr><td>foo</td><td>bar</td></tr>
<tr><td>foo</td><td>bar</td></tr>
</table>

【讨论】：

【解决方案2】：

您可以减少底部填充，这将降低 td 的高度，并且不会影响您的 td 高度。

tr td {
  border-bottom: 1px solid grey;
}

tr:hover td {
   border-bottom: 2px solid red;
   padding-bottom: 0px;**strong text**
}

<table>
  <tr><td>foo</td><td>bar</td></tr>
  <tr><td>foo</td><td>bar</td></tr>
</table>

【讨论】：

【解决方案3】：

您可以使用 box-shadow 来创建不影响元素高度的边框样式。

【讨论】：

【解决方案4】：

您可以使用outline 实现相同但大纲适用于whole element

因此您可以使用box-shadow 在一侧创建轮廓。和outline一样，box-shadow不会改变盒子模型的大小。

tr td {
  box-shadow: 0 -1px 0 #000 inset;
}

tr:hover td {
  box-shadow: 0 -2px 0 #f00 inset;
}

<table>
  <tr>
    <td>foo</td>
    <td>bar</td>
  </tr>
  <tr>
    <td>foo</td>
    <td>bar</td>
  </tr>
</table>

【讨论】：

【解决方案5】：

你也可以尝试通过设置特定的高度，设置box-sizing:border-box

tr td {
  border-bottom: 1px solid grey;
  height:30px;
  box-sizing:border-box;
}

tr:hover td {
   border-bottom: 2px solid red;
}

<table>
  <tr><td>foo</td><td>bar</td></tr>
  <tr><td>foo</td><td>bar</td></tr>
</table>

【讨论】：

【解决方案6】：

当您增加尺寸时，您的线条会变得更高（因为他的新边框）如果您只想增加高度而不改变线条的大小，请这样做：

tr:悬停 td { 边框底部：2px 纯红色； height:your privious heigt-1 }

【讨论】：

然而，计算现在不能在 CSS 中使用吗？所以这将是一个 JavaScript 解决方案。