Box-shadow: the last one will appear at the very bottom?

Every time when you add any values to shorthand properties they are added in clockwise direction. If 4 values are added then it means TOP-RIGHT-BOTTOM-LEFT, if 3 values are added then TOP-LEFT&RIGHT-BOTTOM, if 2 values are added then TOP&BOTTOM-LEFT&RIGHT so here

first value: 2px 2px 15px 5px blue: it is for TOP Second Value: -2px -2px 15px 5px red: it is for LEFT & RIGHT Third Value: 0 20px 25px -8px #000:it is for BOTTOM

oops! But I checked the video, by refreshing the page, the bottom of box shadow appeared to be blue color instead of #000, black color. Top and left appeared to be red while bottom and right appeared to be blue. That's why I am curious about (0 20px 25px -8px #000). The bottom of box-shadow should be appeared as black right? However, the video showed the opposite way. Maybe you can checked the video.

In the video issue is causing due to blur and spread radius. As both the radius are applied the colors are mixing due to which you are getting confused. In the video when the page is refreshed and the effects are shown the black color appears in the very bottom of the div because of x & y offsets. I had created an example to demonstrate the point please go through it. http://jsbin.com/dupixixo/1/edit?html,css,output

I had tried to keep the same values but to show the colors properly I had change some offset values.

WOW!!! Thanks Saujana! You wrote me explaination in a very detailed way. I did appreciate for your efforts on helping me to figure out my confusion. Thanks very much ^.^

If it helps you please mark it best answer, it will help me improve my profile. Thanks

May I know where can I mark best answer?

below each comment you can see the options Add comment and best answer from there just click.