1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
|
<!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
. .
.........
-->
|
