CSS box-shadow属性值的正确顺序是什么？颜色位置有规范吗？

1. 属性值的核心顺序规则 #

box-shadow的单个阴影声明可拆分为几个核心部分，位置要求如下：

• inset：只能放在单个阴影声明的最开头，用于定义内阴影，不能插在其他参数中间
• offset-x、offset-y：必填参数，必须连续出现（先水平偏移，后垂直偏移），放在inset之后
• blur-radius：可选参数，必须放在offset-x/y之后
• spread-radius：可选参数，必须放在blur-radius之后
• 颜色值：可以放在单个阴影声明的最开头（inset之后），或者所有参数的最后，两种写法均被允许

2. 颜色值位置的规范、渲染差异与合规性 #

• 渲染差异：完全没有。浏览器能通过语法明确区分颜色值（如rgba(...)）与长度值（如2px），两种写法的渲染结果完全一致。
• 规范写法：行业惯例（包括MDN示例）更推荐把颜色放在末尾。逻辑上先定义阴影的位置、模糊程度、扩散范围等布局相关参数，最后定义颜色这类视觉参数，可读性更强。
• 合规性：两种写法都完全合规。CSS官方规范明确允许颜色值出现在单个阴影声明的inset之后、偏移值之前，或者所有参数的末尾。

3. 各参数的具体位置要求 #

• inset：必须是单个阴影的第一个值，比如box-shadow: inset 2px 2px 2px rgba(0,0,0,0.2)有效，而box-shadow: 2px inset 2px 2px rgba(0,0,0,0.2)会被解析错误。
• offset-x和offset-y：必须成对出现，顺序不能颠倒（第一个为水平偏移，第二个为垂直偏移），是唯一的必填参数。
• blur-radius：不能放在offset-x/y之前，比如box-shadow: 2px 2px 2px里的第三个2px就是模糊半径，必须在偏移值之后。
• spread-radius：必须在blur-radius之后，比如box-shadow: 2px 2px 2px 1px里的第四个1px是扩散半径，不能放在模糊半径前面。

两种写法示例 #

颜色在末尾的写法（推荐）

/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

颜色在开头的写法（合规但不推荐）

/* color | offset-x | offset-y | blur-radius | spread-radius */
box-shadow: rgba(0, 0, 0, 0.2) 2px 2px 2px 1px;

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