'default'关键字对于 css 变量是什么意思？

Question

我遇到了以下语法：

border-color: var(--disabled) default;

我的css minifier没有正确解释它(它认为它是交替的颜色-上下和左右(。

不幸的是，我找不到任何关于css功能的文档。有人能给我指一下功能名称/文档吗？

看看它的实际操作(我在Chrome上测试过(：

:root {
--disabled: #0000DD;
}
.status-parent {
color: red;
}
.status {
border-width: 5px;
border-style: solid;
border-color: var(--disabled) default;
}

<p class="status-parent">
<span class="status">I have red border</span>
</p>

Answer 1

border-color没有默认值。因此，浏览器将忽略此规则。

CSS变量没有问题。以下是用yellow替换default的相同代码：

:root {
--dissabled: #0000DD;
}
.status-parent {
color: red;
}
.status {
border-width: 5px;
border-style: solid;
border-color: var(--dissabled) yellow;
padding:0.5rem;
}

<p class="status-parent">
<span class="status">I have red border</span>
</p>

因为.status的CSS说明符覆盖了边框的父color，所以您将看到变量(蓝色(负责顶部和底部边框，第二个参数黄色负责左侧和右侧边框。