box-shadow-multiple-001-ref.html (2171B)
1 <!DOCTYPE html> 2 3 <meta charset="UTF-8"> 4 5 <title>CSS Reference Test</title> 6 7 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> 8 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> 9 10 <style> 11 div 12 { 13 color: transparent; 14 font-family: Ahem; 15 font-size: 50px; 16 line-height: 1; 17 } 18 19 div.purple 20 { 21 text-shadow: 1em 0em purple; 22 } 23 24 div.orange-blue 25 { 26 color: yellow; 27 margin-left: 1em; 28 text-shadow: -1em 0em orange, 1em 0em blue; 29 } 30 31 div.fuchsia 32 { 33 margin-bottom: 0.2em; 34 text-shadow: 1em 0em fuchsia; 35 } 36 37 div#third-top 38 { 39 text-shadow: 1em 0em #BF7F7F; 40 } 41 42 div#third-horiz-left-right 43 { 44 color: yellow; 45 margin-left: 1em; 46 text-shadow: -1em 0em #FFD23F , 1em 0em #7F7FBF; 47 } 48 49 div#third-bottom 50 { 51 text-shadow: 1em 0em #FF7FBF; 52 } 53 </style> 54 55 <div class="purple">U</div> 56 57 <div class="orange-blue">B</div> 58 59 <div class="fuchsia">F</div> 60 61 62 <div class="purple">U</div> 63 64 <div class="orange-blue">B</div> 65 66 <div class="fuchsia">F</div> 67 68 69 <div id="third-top">T</div> 70 71 <div id="third-horiz-left-right">H</div> 72 73 <div id="third-bottom">B</div> 74 75 76 <!-- 77 78 The top first 2 are: 79 80 ......... 81 . . 82 . . <-purple 83 . . 84 ....................... 85 . . . . 86 orange-> . . yel . . <-blue 87 . . low . . 88 ....................... 89 . . 90 . . <-fuchsia 91 . . 92 ......... 93 94 The bottom one is: 95 96 ......... 97 . . 98 . . <-#BF7F7F 99 . . 100 ....................... 101 . . . . 102 #FFD23F-> . . yel . . <-#7F7FBF 103 . . low . . 104 ....................... 105 . . 106 . . <-#FF7FBF 107 . . 108 ......... 109 110 -->