CSS简写属性多值失效：border写法报错原因及解决方法

为什么两种写法效果不同？ #

• background是支持多值组合的复合属性：background作为复合属性，允许将多个子属性（如background-image、background-position、background-size、background-repeat）的值通过空格（或/）组合在一个声明里，浏览器能根据语法规则自动区分不同子属性的值。你写的linear-gradient(...) center / 100% 3px no-repeat完全符合这种组合规则，所以能正常解析。
• border的复合属性语法有严格顺序要求：border的复合属性语法是固定的「宽度 样式 颜色」顺序，而且不能直接把四个方向的宽度值和样式、颜色混写。因为四个方向的宽度是border-width子属性的多值用法，不能直接嵌套在border复合属性里和样式、颜色组合，浏览器无法识别这种混乱的写法，所以会报错。

正确实现方式 #

要实现「右侧2px浅灰色边框，其余方向无」的效果，有两种简洁的正确写法：

写法1：拆分使用子属性 #

border-width: 0 2px 0 0;
border-style: solid;
border-color: LightGrey;

写法2：直接使用单方向边框属性 #

border-right: 2px solid LightGrey;

这种写法最直观，直接指定右侧边框的样式，其余方向默认无边框，无需额外设置。

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