536061.html (1830B)
1 <!DOCTYPE html> 2 3 <html lang="en"> 4 <head> 5 <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 6 <title>Bugs with transform: rotate() and box-shadow</title> 7 8 <style> 9 body { 10 overflow: hidden; 11 } 12 13 .label { 14 position: absolute; 15 top: 200px; 16 left: 100px; 17 margin: 0; 18 height: 16px; 19 width: 300px; 20 transform: translate(96px); 21 box-shadow: 0 0 .7em black; 22 border: 1px black solid; 23 } 24 .vlabel { 25 position: absolute; 26 top: 40px; 27 left: 40px; 28 margin: 0; 29 width: 16px; 30 height: 300px; 31 box-shadow: 0 0 .7em black; 32 border: 1px black solid; 33 } 34 </style> 35 </head> 36 37 <body> 38 39 <p class="label"></p> 40 <p class="label" style="top: 400px; box-shadow:none; outline: 3px dashed blue;"></p> 41 <p class="label" style="left:-100px; top: 200px; box-shadow:none; outline: 3px dashed blue; transform: rotate(90deg);"></p> 42 <p class="label" style="left:-40px; top: 200px; transform: rotate(90deg);"></p> 43 <p class="label" style="left:-100px; top: 200px; box-shadow:none; outline: 3px dashed blue; transform: translate(0,396px) rotate(90deg);"></p> 44 <p class="label" style="left:-40px; top: 200px; transform: translate(0,396px) rotate(90deg);"></p> 45 46 <!-- cover a few shadow corners which are a bit different --> 47 <div style="position:absolute; top:40px; left:85px; width:50px; height:50px; background:black; z-index:99;"></div> 48 <div style="position:absolute; top:340px; left:85px; width:50px; height:50px; background:black; z-index:99;"></div> 49 <div style="position:absolute; top:420px; left:85px; width:50px; height:50px; background:black; z-index:99;"></div> 50 <div style="position:absolute; top:730px; left:85px; width:50px; height:50px; background:black; z-index:99;"></div> 51 52 </body> 53 54 </html>