HTML/CSS：增加边框大小而不影响高度

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

trtd{
边框底部：1px纯色灰色；
}
tr：悬停td{
底部边框：2倍纯红；
}

福巴
福巴

您可以使用长方体阴影来创建一个不影响元素高度的类似边框的样式

尝试

边框图像

如下所示：

trtd{
边框底部：2倍纯色透明；
边框图像：线性渐变（到顶部，灰色1px，透明0）2；
}
tr：悬停td{
边框图像：线性渐变（到顶部，红色2px，透明0）2；
}

福巴
福巴

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

trtd{
边框底部：1px纯色灰色；
}
tr：悬停td{
底部边框：2倍纯红；
填充底部：0px；**强文本**
}

福巴
福巴

当你加大尺寸时，你的线条会变得更高（因为他的新边框） 如果只想增加高度而不更改线的大小，请执行以下操作：

tr：悬停td{ 底部边框：2倍纯红； 身高：你的私人身高1

---

}

您可以使用

大纲

实现相同的功能，但大纲适用于

因此，您可以使用

box shadow

在一侧创建轮廓。与

轮廓

类似，

框阴影

不会更改框模型的大小

trtd{
盒影：0-1px 0#000插图；
}
tr：悬停td{
盒影：0-2px0#f00插图；
}

福
酒吧
福
酒吧

您也可以通过设置特定高度和设置框大小：边框框来尝试

trtd{
边框底部：1px纯色灰色；
高度：30px；
框大小：边框框；
}
tr：悬停td{
底部边框：2倍纯红；
}

福巴
福巴

首先，为什么您不希望边框增加行的高度？在任何情况下，边界都需要以某种方式扩展。然而，CSS中无法进行计算，是吗？这将是一个JavaScript解决方案。