102 lines
2.7 KiB
HTML
102 lines
2.7 KiB
HTML
<!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
|
|
. .
|
|
.........
|
|
|
|
-->
|