box-shadow-multiple-001.html (2716B)
1 <!DOCTYPE html> 2 3 <meta charset="UTF-8"> 4 5 <title>CSS Backgrounds Test: multiple outset box-shadow</title> 6 7 <!-- 8 9 Created: May 18th 2023 10 11 Last modified: May 18th 2023 12 13 --> 14 15 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> 16 <link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#box-shadow"> 17 <link rel="match" href="reference/box-shadow-multiple-001-ref.html"> 18 19 <meta content="" name="flags"> 20 21 <!-- 22 23 <shadow> = <color>? && [<length>{2} <length [0,∞]>? <length>?] && inset? 24 25 The box-shadow property attaches one or more drop-shadows to 26 the box. The property accepts either the none value, which 27 indicates no shadows, or a comma-separated list of shadows, 28 ordered front to back. 29 30 Each shadow is given as a <shadow>, represented by 2-4 length 31 values, an optional color, and an optional inset keyword. 32 33 --> 34 35 <style> 36 div 37 { 38 background-color: yellow; 39 font-size: 50px; 40 height: 1em; 41 margin: 1em auto 2.2em 1em; 42 width: 1em; 43 } 44 45 div#multiple 46 { 47 box-shadow: purple 0em -1em, blue 1em 0em, fuchsia 0em 1em, orange -1em 0em; 48 margin-top: 58px; 49 } 50 51 div#multiple-overlapping1 52 { 53 box-shadow: purple 0em -1em, red 0em -1em, blue 1em 0em, red 1em 0em, fuchsia 0em 1em, red 0em 1em, orange -1em 0em, red -1em 0em; 54 } 55 56 div#multiple-overlapping2 57 { 58 box-shadow: rgb(128 0 128 / 50%) 0em -1em, rgb(255 255 0 / 50%) 0em -1em, rgb(0 0 255 / 50%) 1em 0em, rgb(255 255 0 / 50%) 1em 0em, rgb(255 0 255 / 50%) 0em 1em, rgb(255 255 0 / 50%) 0em 1em, rgb(255 165 0 / 50%) -1em 0em, rgb(255 255 0 / 50%) -1em 0em; 59 } 60 </style> 61 62 <div id="multiple"></div> 63 64 <div id="multiple-overlapping1"></div> 65 66 <div id="multiple-overlapping2"></div> 67 68 <!-- 69 70 The top first 2 are: 71 72 ......... 73 . . 74 . . <-purple 75 . . 76 ....................... 77 . . . . 78 orange-> . . yel . . <-blue 79 . . low . . 80 ....................... 81 . . 82 . . <-fuchsia 83 . . 84 ......... 85 86 The bottom one is: 87 88 ......... 89 . . 90 . . <-#BF7F7F 91 . . 92 ....................... 93 . . . . 94 #FFD23F-> . . yel . . <-#7F7FBF 95 . . low . . 96 ....................... 97 . . 98 . . <-#FF7FBF 99 . . 100 ......... 101 102 -->