Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-backgrounds/box-shadow-multiple-001.html - WPT Dashboard Interop Dashboard
<!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="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
. .
.........
-->