I have applied the styles to a button. I guess they are for every side of the button. Is it so? because they look the same with different values. What do each row represent?
Correct me if I am wrong, In every row, last cell represents color. First one reprents top/bottom shadow, 2nd is left/right, 3rd is how intense the shadow is. Right?
box-shadow: 0 0 5px #7aa3a5,
0 0 5px #7aa3a5,
0 0 5px #7aa3a5,
0 0 5px #7aa3a5;
For each line, the first input you have is the offset on the x axis, the second is the offset on the y axis, and the third is the blur radius. You're correct in thinking the last parameter is the color.
People use multi-line box shadows to add layers of box shadows. These are added in layers, so the first one will be at the top on the z axis and each following will be added below the previous layer. Right now you can't see this because they all have the same offsets on the x and y axis, but if you move those parameters around a bit and change the colors you should see some variation.
The docs for box-shadow are here to learn more
MDN documentation for the box-shadow property says:
To specify multiple shadows, provide a comma-separated list of shadows.
So it looks like this bit of code is just adding the same shadow four times.
here the code look like
.buttonclass
{
box-shadow: 0px 0px 5px 10px #888888;
}
its work like clockwise first 0px =top , 2nd 0px =rightside , 5px for bottom and 10px for leftside
hope you understand