| <!DOCTYPE html> | |
| <meta charset="UTF-8"> | |
| <title>CSS Backgrounds Test: multiple outset box-shadow</title> | |
| <!-- | |
| Created: May 18th 2023 | |
| Last modified: May 18th 2023 | |
| --> | |
| <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> | |
| <link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#box-shadow"> | |
| <link rel="match" href="reference/box-shadow-multiple-001-ref.html"> | |
| <meta content="" name="flags"> | |
| <!-- | |
| <shadow> = <color>? && [<length>{2} <length [0,∞]>? <length>?] && inset? | |
| The box-shadow property attaches one or more drop-shadows to | |
| the box. The property accepts either the none value, which | |
| indicates no shadows, or a comma-separated list of shadows, | |
| ordered front to back. | |
| Each shadow is given as a <shadow>, represented by 2-4 length | |
| values, an optional color, and an optional inset keyword. | |
| --> | |
| <style> | |
| div | |
| { | |
| background-color: yellow; | |
| font-size: 50px; | |
| height: 1em; | |
| margin: 1em auto 2.2em 1em; | |
| width: 1em; | |
| } | |
| div#multiple | |
| { | |
| box-shadow: purple 0em -1em, blue 1em 0em, fuchsia 0em 1em, orange -1em 0em; | |
| margin-top: 58px; | |
| } | |
| div#multiple-overlapping1 | |
| { | |
| 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; | |
| } | |
| div#multiple-overlapping2 | |
| { | |
| 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; | |
| } | |
| </style> | |
| <div id="multiple"></div> | |
| <div id="multiple-overlapping1"></div> | |
| <div id="multiple-overlapping2"></div> | |
| <!-- | |
| The top first 2 are: | |
| ......... | |
| . . | |
| . . <-purple | |
| . . | |
| ....................... | |
| . . . . | |
| orange-> . . yel . . <-blue | |
| . . low . . | |
| ....................... | |
| . . | |
| . . <-fuchsia | |
| . . | |
| ......... | |
| The bottom one is: | |
| ......... | |
| . . | |
| . . <-#BF7F7F | |
| . . | |
| ....................... | |
| . . . . | |
| #FFD23F-> . . yel . . <-#7F7FBF | |
| . . low . . | |
| ....................... | |
| . . | |
| . . <-#FF7FBF | |
| . . | |
| ......... | |
| --> |