box-shadow-039.html (2118B)
1 <!DOCTYPE html> 2 3 <meta charset="UTF-8"> 4 5 <title>CSS Backgrounds Test: box-shadow in 3 sub-tests with not inset and Npx 0px</title> 6 7 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> 8 <link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#the-box-shadow"> 9 <link rel="match" href="reference/box-shadow-039-ref.html"> 10 11 12 <!-- 13 14 <shadow> = inset? && <length>{2,4} && <color>? 15 16 A comma-separated pair of numbers in curly braces {A,B} 17 indicates that the preceding type, word, or group occurs 18 at least A and at most B times. 19 20 A question mark (?) indicates that the preceding type, 21 word, or group is optional (occurs zero or one times). 22 23 The components of each <shadow> are interpreted as follows: 24 25 1st <length> 26 Specifies the horizontal offset 27 of the shadow. A positive value draws a shadow that is offset to 28 the right of the box, a negative length to the left. 29 30 2nd <length> 31 Specifies the vertical offset 32 of the shadow. A positive value offsets the shadow down, a negative one up. 33 34 4th <length> 35 Specifies the spread distance. 36 Positive values cause the shadow to expand in all directions 37 by the specified radius. 38 Negative values cause the shadow to contract. 39 40 --> 41 42 <style> 43 div 44 { 45 background-color: rgba(0, 0, 255, 0.5); /* semi-transparent blue */ 46 border: black double 18px; 47 height: 36px; 48 margin-bottom: 36px; 49 width: 36px; 50 } 51 52 /* Npx 0px, zero spread, not-inset */ 53 div#sub-test1 54 { 55 box-shadow: 36px 0px rgba(255, 165, 0, 0.5); /* semi-transparent orange */ 56 } 57 58 /* Npx 0px, positive spread, not-inset */ 59 div#sub-test2 60 { 61 box-shadow: 36px 0px 0px 18px rgba(255, 165, 0, 0.5); /* semi-transparent orange */ 62 } 63 64 /* Npx 0px, negative spread, not-inset */ 65 div#sub-test3 66 { 67 box-shadow: 36px 0px 0px -18px rgba(255, 165, 0, 0.5); /* semi-transparent orange */ 68 } 69 </style> 70 71 <h3>Not inset and Npx 0px: 36px 0px</h3> 72 73 <div id="sub-test1"></div> 74 75 <div id="sub-test2"></div> 76 77 <div id="sub-test3"></div>