cssbox-shadow

How come we can have color value first in box-shadow rule?

The documentation for box-shadow clearly states that the first option is for length value, and color value comes last.

How come than that the below works?

box-shadow: #0000002e 0px 1px 2px;


.style {
  height: 50px;
  width: 100%;
  box-shadow: #0000002e 0px 1px 2px;
}
<div class="style"></div>

Solution

  • The order is optional, you can put the color at the beginning or the end and it wouldn't be "incorrect".

    In the documentation it states <shadow> = inset? && <length>{2,4} && <color>

    Those && separators mean that they're mandatory, but order is not important. The ? for inset? and <color>? mean that those fields are optional.

    The compiler sets the values based off the input type.