css - 如何删除 "border-top-width"css 样式？

Question

假设我有一个具有以下 CSS 样式的按钮:

Button {
    border:2px #eee solid;
    border-top-width: 5px;
}

这将生成一个颜色为#eee 的2px 边框的按钮，但顶部边框的厚度为5px。

现在，假设我有另一个继承此样式的按钮，但对于这个新按钮，我想删除 border-top-width 属性。

所以我的问题是，如何将 border-top-width 设置为 null 或听取默认边框样式？以下不起作用，但显示了我正在尝试做的事情:

Button.class-name {
    border-top-width: auto;
}

请注意，在我的情况下，我不能只将值设置为“2px”。我需要完全删除该值。我试过“auto”、“inherit”、“initial”等...但似乎没有任何方法可以删除“border-top-width”属性...

有什么想法吗？

Answer 1

CSS 提出了一个 initial value这会将其重置为浏览器的默认值。

没有办法(也没有建议的方法)将其设置为之前设置的值，但有一个设置它的规则。

如果您希望它从 border:2px #eee solid; 中获取值，那么您必须明确地将其设置为 2px。

如果您使用的是 CSS 预处理器，例如 SASS，您可以使用变量:

$defaultBorderWidth: 2px;
Button {
    border:$defaultBorderWidth #eee solid;
    border-top-width: 5px;
}
Button.class-name {
    border-top-width: $defaultBorderWidth;
}

您还可以将此技术用于 native CSS variables .