CSS框阴影正确值位置

Question

方框阴影值位置的正确顺序是什么?如果我把颜色值放在开头或结尾，效果很好，但哪个更正确呢?这在网页浏览器中有关系吗，还是两者都显示?Mozilla的网站和示例的末尾都有这个颜色。哪个更正确，还是都正确?那么inset, offset-x-y, blur, spread-radius的其他值和它们的位置呢?

结尾颜色:

/* 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;

Answer 1

box-shadow属性中值的排列顺序如下:

box-shadow: [inset] [offset-x] [offset-y] [blur-radius] [spread-radius] [color];

重要的是要注意值的顺序是固定的，并且值应该按照上面列出的顺序放置。颜色放在开头还是结尾并不重要，只要所有的值都以正确的顺序包含。 例如,

box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
box-shadow: rgba(0, 0, 0, 0.2) 2px 2px 2px 1px;
box-shadow: inset 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

通常认为将颜色值放在最后是一种良好的做法。颜色放在开头还是结尾并不重要，只要所有的值都以正确的顺序包含。

Answer 2

将颜色放在格式字符串的开头或结尾都是正确的。

根据形式语法:

box-shadow = 
none       |
<shadow>#  
<shadow> = 
<color>?                                   &&
[ <length>{2} <length [0,∞]>? <length>? ]  &&
inset?

其中&&表示:

所有这些实体都是强制性的，但可以以任何顺序出现。

^{(注意问号(?)表示实体是可选的，所以在这个特定的情况下，不是所有实体都是强制性的。)}