zur Version in deutscher Sprache see also:
CSS cursors

-webkit-box-shadow -moz-box-shadow { box-shadow:

inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? && <color>? ]


CSS 3 box-shadow property, inset keyword and spread radius test case

This site's script no longer adds -webkit- or -moz- prefixes. So you will not see shadows with browsers
older than Firefox 4, Safari 5.1 or Chrome 10.

As of now there is no longer a need for those prefixes. Unprefixed box-shadow is widely supported.
In case you want to keep the -webkit-prefix for now (not recommended), do it in that order:

{ -webkit-box-shadow: /* if you really feel a strong need, add shadows for some
			 outdated Apple and Android smartphone browsers here */;
	  box-shadow: /* shadows for any other browser go here */;

Currently (2014-03) only Gecko (Firefox) and Safari (and good old Presto-Opera12) have a CSS standard compliant implementation in regard to blur radius. Other browsers (IE 9-11, Google Chrome, bad new Blink-Opera) differ slightly in blurring and might follow sooner or later (see Mozilla's [INVALID] bug 818063).
So you should use Firefox or Safari as reference to create a future-proof blurred box-shadow.

Read What does a blur radius mean? from Mozilla's David Baron if you are interested in browser implementation details. Just check your browser for correctness with David's CSS test: blur computation for box-shadow on csswg.org.


border-radius: 50%; box-shadow: inset 0.3em 0.3em 0.9em black;

0.5em -0.5em 0.4em red, 0.5em 0.5em 0.4em gold, -0.5em 0.5em 0.4em lime, -0.5em -0.5em 0.4em blue;

Specifying a color is optional. If omitted, box-shadows are drawn in foreground color (text color), as in the following four examples with black shadows.
Older WebKit browsers are buggy and ignore those. This bug is fixed in WebKit 536.7 and therefore fixed since Chrome 20 and Safari 6.

0 0 0 0.5em;
0 0 1em;
1em 0.5em;
1em 0.5em 1em;

0.3em 0.3em lightgreen;
0.3em 0.3em 0 0.6em lightgreen;
0 1.5em 0 -0.7em lightgreen;
2em 1.5em 0 -0.7em lightgreen;
0 2em 0 -1em lightgreen;
9em 1.2em 0 -0.6em lightgreen;

0 0 1em maroon;
0 0 1em 0.5em maroon;
0 0 1em 1em maroon;

-0.4em -0.4em 1em olive;
0.4em 0.4em 1em olive;
0.4em 0.4em 1em -0.2em olive;
0.4em 0.4em 1em 0.4em olive;
0 1.5em 0.5em -1em olive;

inset 0.2em 0.4em red, inset -1em -0.7em red;
inset 11em 0 red;
inset -1em 0 red;
inset 13em 0 3em -3em orange, inset -3em 0 3em -3em blue;
inset 11em 0 2em orange;
inset 0 0.3em red;
inset 0 -1.1em red;
inset 1em 0 1em -1em blue;
inset 0 0 0.5em blue;
inset 0 0 2em blue;
inset 0 2em 3em -1em green;
inset 0 2em 3em -2em green;
inset 0 2em 3em -3em green;
inset 0 0 1em khaki;
inset 0 0 1em khaki, inset 0 0 1em khaki, inset 0 0 1em khaki, inset 0 0 1em khaki;
inset 0 0 0.5em 0.5em khaki; /* similar to above */

/* seamless if <blur-radius> ≤ <spread-radius> */
inset 0 0 0.5em 0.5em khaki; /* background: black */
inset 0 0 2em 2em khaki; /* background: red; padding: 2em */
0 0 0.5em 0.5em teal; /* background: teal */
inset 0 0 0.5em 0.5em indigo, 0 0 0.5em 0.5em indigo; /* padding: 1em */

inset 0 0 1em black, inset 0 0 1em black, inset 0 0 1em black, inset 0 0 1em black;
inset 0 0 0.7em 0.5em black; /* should be very similar to above in CSS conforming browsers like Firefox */
inset 0 2em 3em -1.5em green, inset 0 -2em 3em -2em blue;
inset 1em 1em 2em -1em blue;
inset 1em 1em 2em -1em blue, inset -1em -1em 2em -1em red;
inset 0 2em 3em -2em white, inset 0 -2em 3em -2.5em black; /* background:red */
inset 1em 1em 1em -1em white, inset -1em -1em 1em -1em black; /* background:red */
inset -1em -1em 1em -1em black, inset 1em 1em 1em -1em white; /* background:red */
inset -0.3em -0.3em 0.6em rgba(0,0,0,0.5), inset 0.3em 0.3em 0.6em rgba(256,256,256,0.7);
inset 0.3em 0.3em 0.6em rgba(256,256,256,0.5), inset -0.3em -0.3em 0.6em rgba(0,0,0,0.5);
0.2em 0.2em 0.7em black, inset 0 0 0.7em red;

Mit freundlicher Unterstützung von Elektronotdienst Nürnberg
Besuchen Sie auch 100 Mbit Netzwerk über Telefonkabel