无法通过CSS自定义属性设置边框样式问题求助

直接解决方案 #

把--interactive-border-top-style的@property定义改成下面这样：

@property --interactive-border-top-style {
    syntax: "<line-style>";
    inherits: true;
    initial-value: dotted;
}

问题根源 #

你之前用<string>作为这个自定义属性的语法类型，浏览器会把initial-value里的dotted当成字符串处理，但border-top-style根本不接受字符串值——它只认dotted、solid这类属于<line-style>类型的关键字。所以浏览器判定这个值无效，直接用了border-style的默认值none，自然看不到边框样式。

而你手动写border-top-style: solid;或者给var()加回退值dashed能生效，是因为这俩都是合法的<line-style>关键字，不是字符串。

额外提醒 #

定义CSS自定义属性时，syntax必须和目标CSS属性接受的数据类型匹配：

• 颜色类属性对应<color>
• 长度类属性对应<length>
• 边框样式这种关键字属性，就得用<line-style>这个专属类型，不能瞎用<string>

内容的提问来源于stack exchange，提问作者timo