difference between '-webkit-box-shadow' & 'box-shadow' in css

Question

Recently I have started to learn css here I came to know about

box-shadow 

property in CSS then I came to know another property

-webkit-box-shadow:

and also

-moz-box-shadow:

which also used to give shadow to the shadow. I just can't differentiate between them. Can anybody help me to understand exactly this properties?

Thanks in advance to helpers.

Answer 1

They all apply a box shadow. However, -webkit-box-shadow and -moz-box-shadow are specific to Webkit (e.g. Safari) and Mozilla browsers respectively.

As a CSS 3 property, these are used as vendor specific implementations of box shadow until it becomes widely supported.

Answer 2

box-shadow is a CSS3 standart implementation, while other 2 are browser specific (or rather engine specific) implementation for WebKit browsers (e.g. Chrome) or Gecko browsers (e.g. FireFox)

Answer 3

They are, essentially all the same. However it is for each browser to pick up, as they do not all fall into line by just picking up box-shadow property

For a full article on the pitfalls and plusses: Vendor-specific Properties