<!DOCTYPE html><metacharset="UTF-8"><title>CSS Backgrounds Test: box-shadow in 3 sub-tests with not inset and Npx Mpx</title><linkrel="author"title="Gérard Talbot"href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"><linkrel="help"href="https://www.w3.org/TR/css-backgrounds-3/#the-box-shadow"><linkrel="match"href="reference/box-shadow-040-ref.html"><!-- <shadow> = inset? && <length>{2,4} && <color>? A comma-separated pair of numbers in curly braces {A,B} indicates that the preceding type, word, or group occurs at least A and at most B times. A question mark (?) indicates that the preceding type, word, or group is optional (occurs zero or one times). The components of each <shadow> are interpreted as follows: 1st <length> Specifies the horizontal offset of the shadow. A positive value draws a shadow that is offset to the right of the box, a negative length to the left. 2nd <length> Specifies the vertical offset of the shadow. A positive value offsets the shadow down, a negative one up. 4th <length> Specifies the spread distance. Positive values cause the shadow to expand in all directions by the specified radius. Negative values cause the shadow to contract. --><style>div{background-color:rgba(0,0,255,0.5);/* semi-transparent blue */border:blackdouble18px;height:36px;margin-bottom:54px;width:36px;}/* Npx Mpx, zero spread, not-inset */div#sub-test4{box-shadow:36px18pxrgba(255,165,0,0.5);/* semi-transparent orange */}/* Npx Mpx, positive spread, not-inset */div#sub-test5{box-shadow:36px18px0px18pxrgba(255,165,0,0.5);/* semi-transparent orange */}/* Npx Mpx, negative spread, not-inset */div#sub-test6{box-shadow:36px18px0px-18pxrgba(255,165,0,0.5);/* semi-transparent orange */}</style><h3>Not inset and Npx Mpx: 36px 18px</h3><divid="sub-test4"></div><divid="sub-test5"></div><divid="sub-test6"></div>
