CSS继承的边框颜色似乎被忽略了

我有一个锚元素，当光标悬停在锚元素上时，我想在它周围画一个边框。问题是，在绘制边框时，锚文本及其右侧的所有内容都会略微“跳”到右侧

我想我会很聪明，用背景色的边框（通过“继承”）来设置锚的样式，以便在没有悬停时绘制默认边框。然后，当用户悬停时，红色边框仅绘制在背景边框上，文本不应跳到右侧。但这种方法行不通

我发帖的主要原因是想了解为什么我使用继承的颜色绘制边框的策略不起作用。换句话说，为什么不绘制继承颜色的边框？第二，我想知道如何防止文本跳转

以下是样式和JSFIDLE：

---

您还需要告知

边框的初始位置。因此，最初，给透明的边界，给空间


正文{
填充：1em；
}
答：林克，
a:参观了{
边框：1px实心透明；
}
a:悬停{
边框：1px纯红；
}

您好，这里有更多的文本，它不会移动。
请尝试使用继承，而不是使用继承

透明的

然后，您的css类将与下面的类类似

a:link, a:visited {
 border: 1px solid transparent;
}

这将确保边界空间已被占用，并且当您悬停时不会造成伤害

我发帖的主要原因是要理解为什么我使用继承的颜色来绘制边框的策略不起作用。换句话说，为什么不绘制继承颜色的边框

它不起作用，因为
1px solid inherit
是无效值：


，不能将
inherit
值用作速记声明的一部分（与您的情况类似）。以下是相关的深入引用：

只有单个属性值可以继承。由于缺少的值被它们的初始值替换，因此不可能通过省略它们来允许单个属性的继承。关键字inherit可以应用于属性，但只能作为一个整体，不能作为一个或另一个值的关键字。这意味着使某些特定值被继承的唯一方法是将longhand属性与关键字inherit一起使用

这意味着您需要使用longhand
border color
属性来继承
border color
值：


第二，我想知道如何防止文本跳转

如果不需要继承的边框颜色，只需使用透明边框替换添加的边框：


或者，您也可以使用
outline
属性向元素添加不影响元素的轮廓，而不是使用边框：


您可以使用inherit，但不能将其用作引用中所述的速记声明的一部分。要么全力以赴，要么一事无成。啊，乔希，我真的放弃了。我不知道我能否以如此详细和令人敬畏的方式回答。好男人<代码>：）

谢谢你引用MDN，Josh。这就是我要找的。但是，第一个示例仍然没有使用页面继承的背景色绘制边框。我希望它能继承页面的背景色，有效地产生一个透明的边框。元素的边框颜色不会继承其背景色。它继承自父元素的边框颜色。

a:link, a:visited {
 border: 1px solid transparent;
}

a:link,
a:visited {
  border: 1px solid;
  border-color: inherit;
}

a {
  border: 1px solid transparent;
}
a:hover {
  border: 1px solid red;
}

a:hover {
  outline: 1px solid red;
}